手机版网制作总结

《手机版网制作总结》由会员分享，可在线阅读，更多相关《手机版网制作总结（6页珍藏版）》请在装配图网上搜索。

1、导读：国内手机网站目前还算是个新鲜事物，相应的手机网站前端开发也并不是特别成熟，对于一种网页设计师来说要做一种手机网站还是会遇到许多问题，本文转载自淘宝 UED，分享如何开发进行手机网站的前端卡发。从初接手淘宝手机网站前端开发的工作至今，转眼已是一年。一步步看着手机淘宝从最初的beta版本到今天的样子，感慨良多。手机网站开发，有着许多不为人知的困难：一是可参照的资料太少，大部分手机网站都处在起步阶段，诸多的时候都是摸着石头过河，而鉴于淘宝自身的特殊性，也使得我们在参照成功案例之余，要做更多的思考；二是兼容性工作异常艰苦，难度一点也不比web网站的兼容性工作来的低（有关这点，请参见我之前的文章）

2、；再者作为一种手机网站的前端开发，也往往容易被人忽视（涉及我们自己），人们也许会觉得做好一种手机网站能有多难，理解一点XHTML、一点 CSS，甚至不需要对JavaScript有什么研究，事实却不是如此，正由于手机网站的开发受到设备的太多限制，前端们常常为了节省几种字节而纠结万 分，写出语义化良好的代码也显得更加重要，而多版本的开发需求也对于JavaScript的优雅降级规定甚高，这样才干使得网站有分版本需求的时候可以公 用同一套XHTML代码，最大限度的减少开发成本。对于手机网站来说，相信目前仅仅只是个开始，随着多种新机型的相继面世，这块领域必将成为兵家必争的新高地。注意：由于手机网站发展迅

3、速，请参阅者注意本篇文章的发布时间。目录1. 手机顾客设备记录分析 2. 手机浏览器兼容性测试成果概要 3. 手机网站开发中你需要注意的问题 4. 推荐参照资料 5. 总结 手机顾客设备记录分析拥有全面的顾客数据，无疑能协助我们做出更符合顾客需求的产品。内部数据能帮我们精确理解我们的目的顾客群的特性；而外部数据能告诉我们大环境下的手机顾客状况，并且能在内部数据不够充足的时候予以我们某些非常有用的信息。从外部数据来看，10月到11月期间国内浏览器品牌市场占有率前三甲为： Nokia(78%) Opera(OEM)(10%) iPhone(Safari) (3%) 国内的手机操作系统前三甲为： N

4、okia SymbianOS(80%) iPhoneOS(6%) SonyEricsson(5%) 固然，作为中国的手机网站开发者，不能忽视强大的山寨机市场（或者应当叫作做国货精品手机市场？）。顺便提一下，此类手机一般使用的是MTK操作系统。（以上数据均来自）手机浏览器兼容性测试成果概要注意：如下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及如下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖多种特性的手机，但并不代表所有手机的状况。XHTML部分大多数手机不支持的： 表单元素的“disable

5、”属性 部分手机不支持的： “button”标签 “inputtype=file“标签 “iframe”标签。 虽然只有部分手机不支持这几种标签，但由于这些标签在页面中往往具有非常重要的功能，因此属于高危标签，要谨慎使用。少数手机不支持的： “select”标签：该标签如果被赋予比较复杂的CSS属性，也许会导致显示不正常，例如”vertical-align:middle”。 CSS部分大部分手机不支持的： “font-family”属性：由于手机基本上只安装了宋体这一种中文字体； “font-family:bold;”：对中文字符无效，但一般对英文字符是有效的； “font-style: it

6、alic;”：同上； “font-size”属性：例如12px的中文和14px的中文看起来同样大，当字符大小为18px的时候你也许能看出来某些区别； “white-space/word-wrap”属性：无法设立强制换行，因此当你网页有诸多中文的时候，需要特别关注不要让过多连写的英文字符撑开页面； “background-position”属性：但背景图片的其她属性设定是支持的； “position”属性； “overflow”属性； “display”属性； “min-height”和”min-weidth”属性； 部分手机不支持的： “height”属性：对”height”的支持不太好，奇怪

7、的是在我们的测试当中，仅仅只有很少部分手机不支持”width”属性； “pading”属性 “margin”属性：更高比例的手机不支持”margin”的负值。 少数手机不支持的： 少数手机对CSS完全不支持； JavaScript部分这部分测试相对不那么让人抓狂，要么干脆不支持，如果支持的话，对基本的dom操作、事件等支持度都还不错。但我们没有测试过很复杂的脚本。在我们测试过的手机当中，支持（涉及不完全支持）JavaScript的手机比例大概在一半左右，固然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。其她 部分手机不支持png8和png24，因此尽量使用

8、jpg和gif的图片 此外对于平滑的渐变等精细的图片细节，部分手机的色彩支持度并不能达到规定，因此慎用有平滑渐变的bar设计 部分手机对于超大图片，既不进行缩放，也不显示横下滚动条 少数手机在打开超过20k的测试页面时，会显示内存局限性 开发中你需要注意的问题 手机网页编码需要遵循什么规范？遵循XHTML Mobile Profile规范（WAP-277-XHTMLMP-1029-a.pdf），简称为XHTML MP，也就是一般说的WAP2.0规范。XHTMLMP 是为不支持XHTML的所有特性且资源有限的客户端所设计的。它以XHTML Basic为基本，加入了某些来自XHTML 1.0的元素

9、和属性。这些内容涉及某些其她元素和对内部样式表的支持。和XHTML Basic相似，XHTML MP是严格的XHTML 1.0子集。 网页文档推荐使用扩展名？推荐命名为xhtml，按WAP2.0的规范原则写成html/htm等也是可以的。但少数手机对html支持的不好。 为什么现今大多数的网站一行字数上限为14个中文字符？由于手持设备的特殊性，其页面中实际 文字大小未必是我们在CSS中设定的文字大小，特别是在第三方浏览器中。例如Nokia5310，其内置浏览器 页面内文字大小与CSS设定相符，但是第三方浏览器OperaMini与UCWEB页面内文字大小却不小于CSS设定。经测试，其文本大概在1

10、6px左右。 如果屏幕辨别率宽度为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。 用手机模拟器和第三方手机浏览器的在线模拟器来测试页面是不是靠谱？有条件的话，我们固然建 议在手机实体上进行测试，由于目的客户群的手机设备总是在不断变化的，这些手机模拟器一般不能完全对的的模拟页面在手机上的显示状况，例如图片色彩，页面 大小限制等就很难再模拟器上测试出来。固然，某些第三方手机浏览器的在线模拟器还是可以进行测试的，第三方浏览器相对来说受手机设备的影响较小。