手机端网页web开发要点

头部必须要加的

3、移动web页面自动探测电话号码

结论

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

/*移动端定义字体的代码*/body{font-family:Helvetica;}

大多数手机不支持的：

表单元素的“disable”属性

部分手机不支持的：

“button”标签
“input[type=file]“标签
“iframe”标签。

虽然只有部分手机不支持这几个标签，但因为这些标签在页面中往往具有非常重要的功能，所以属于高危标签，要谨慎使用。少数手机不支持的：

“select”标签：该标签如果被赋予比较复杂的CSS属性，可能会导致显示不正常，比如”vertical-align:middle”。

大部分手机不支持的：

“font-family”属性：因为手机基本上只安装了宋体这一种中文字体；
“font-family:bold;”：对中文字符无效，但一般对英文字符是有效的；
“font-style: italic;”：同上；
“font-size”属性：比如12px的中文和14px的中文看起来一样大，当字符大小为18px的时候你也许能看出来一些区别；
“white-space/word-wrap”属性：无法设置强制换行，所以当你网页有很多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面；
“background-position”属性：但背景图片的其他属性设定是支持的；
“position”属性；
“overflow”属性；
“display”属性；
“min-height”和”min-weidth”属性；

部分手机不支持的：

“height”属性：对”height”的支持不太好，奇怪的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性；
“pading”属性
“margin”属性：更高比例的手机不支持”margin”的负值。

少数手机不支持的：

少数手机对CSS完全不支持；

其他

部分手机不支持png8和png24，所以尽量使用jpg和gif的图片
另外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到要求，所以慎用有平滑渐变的bar设计
部分手机对于超大图片，既不进行缩放，也不显示横下滚动条
少数手机在打开超过20k的测试页面时，会显示内存不足

手机网页编码需要遵循什么规范？ 遵循XHTML Mobile Profile规范，简称为XHTML MP，也就是通常说的WAP2.0规范。 XHTMLMP是为不支持XHTML的全部特性且资源有限的客户端所设计的。它以XHTML Basic为基础，加入了一些来自XHTML 1.0的元素和属性。这些内容包括一些其他元素和对内部样式表的支持。和XHTML Basic相同，XHTML MP是严格的XHTML 1.0子集。
网页文档推荐使用扩展名？ 推荐命名为xhtml，按WAP2.0的规范标准写成html/htm等也是可以的。但少数手机对html支持的不好。
为什么现今大多数的网站一行字数上限为14个中文字符？ 由于手持设备的特殊性，其页面中实际文字大小未必是我们在CSS中设定的文字大小，尤其是在第三方浏览器中。例如Nokia5310，其内置浏览器页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却大于CSS设定。经测试，其文本大概在16px左右。假如屏幕分辨率宽度为240px，去除外边距，那么其一行显示14个字以内，是比较保险（避免文本换行）的做法。
使用WCSS还是CSS？ WCSS (WAP Cascading Style Sheet 或称 WAP CSS)是移动版本的CSS样式表。它是CSS2的一个子集，去掉了一些不适于移动互联网特性的属性，并加入一些具有WAP特性的扩展（如-wap-input-format/-wap-input-required/display:-wap-marquee等）。需要留意的是，这些特殊的属性扩展并不是很实用，所以在实际的项目开发当中，不推荐使用WCSS特有的属性。
避免空值属性 如果属性值为空，在web页面中是完全没有问题的，但是在大部分手机网页上会报错。
网页大小限制 建议低版本页面不超过15k，高版本页面不超过60k。
用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？ 有条件的话，我们当然建议在手机实体上进行测试，因为目标客户群的手机设备总是在不断变化的，这些手机模拟器通常不能完全正确的模拟页面在手机上的显示情况，比如图片色彩，页面大小限制等就很难再模拟器上测试出来。当然，一些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。

手机端网页web开发要点相关推荐

手机端网页设计尺寸,手机端网页设计图片尺寸
电脑网页的设计尺寸对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window XP常 ...
ps制作手机端网页字体大小_制作网页的最佳字体大小
ps制作手机端网页字体大小 To make web content work, text on a page must be readable for all visitors. Following ...
手机端网页中图片之间出现白线的解决方法
手机端网页中图片之间出现白线的解决方法参考文章: (1)手机端网页中图片之间出现白线的解决方法 (2)https://www.cnblogs.com/syzdidi/p/9686463.html 备 ...
手机端网页设计尺寸大小
手机端网页设计尺寸大小对大于30W台客户端用户进行测试,得到的测试数据如下(数据来源于网络): 安全分辨率为1024 X 768 px 可建议大分辨率为1280 X 800 px 在Window X ...
携程手机端网页设计效果图
携程手机端网页设计效果图为了避免挂科,该做的还是得做,自己学得也不咋会,就瞎写的,反正只要效果图出来就完事.所以代码极其啰嗦哈哈哈哈. 效果图如下: 文件总的放置路径是这样的 : 这个是 html ...
手机端和web端消息同步框架
框架特点: 1.手机端和web端任何一方发送消息,另外一方也能收到消息 2.手机端和web端任何一方读取某消息,另外一方也能收到该消息已读 3.手机端和web端只要在线就能够实时接收到消息,不在线登录 ...
手机端网页处理手机返回键
// 手机端网页: 处理手机返回键 window.onpopstate = function (event) {// 监听到已经按下返回键,获取URL var url = "" + ...
解决手机端网页缩放问题
解决手机端网页缩放问题这个申明是移动设备用的,1:1显示设备屏幕大小,禁止缩放加到网页文件< head > 标签中 <meta name="viewport" ...
如何使用edge浏览器或chrome谷歌浏览器调试手机端网页（微信网页、浏览器皆可）
如何使用edge浏览器或chrome谷歌浏览器调试手机端网页(微信网页.浏览器皆可) 1.打开开发者选项中的USB调试功能(狂点"关于手机"中的版本号,然后返回到系统设置中就能看到 ...

手机端网页web开发要点

结论

手机端网页web开发要点相关推荐

最新文章

热门文章