手机版网页制作总结

导读：国内手机网站目前还算是个新鲜事物，相应的手机网站前端开发也并不是特别成熟，对于一个网页设计师来说要做一个手机网站还是会碰到许多问题，本文转载自淘宝，分享如何开发进行手机网站的前端卡发。

从年初接手淘宝手机网站前端开发的工作至今，转眼已是一年。一步步看着手机淘宝从最初的版本到今天的样子，感慨良多。

手机网站开发，有着许多不为人知的困难：

一是可参考的资料太少，大部分手机网站都处于起步阶段，很多的时候都是摸着石头过河，而鉴于淘宝自身的特殊性，也使得我们在参考成功案例之余，要做更多的思考；

二是兼容性工作异常艰辛，难度一点也不比网站的兼容性工作来的低（关于这点，请参见我之前的）；

再者作为一个手机网站的前端开发，也往往容易被人忽视（包括我们自己），大家也许会觉得做好一个手机网站能有多难，了解一点、一点，甚至不需要对有什么研究，事实却不是如此，正因为手机网站的开发受到设备的太多限制，前端们常常为了节约几个字节而纠结万分，写出语义化良好的代码也显得更加重要，而多版本的开发需求也对于的优雅降级要求甚高，这样才能使得网站有分版本需求的时候可以公用同一套代码，最大程度的降低开发成本。

对于手机网站来说，相信现在仅仅只是个开始，随着各种新机型的相继面世，这块领域必将成为兵家必争的新高地。

注意：由于手机网站发展迅速，请参阅者注意本篇文章的发布时间。

目录

1.手机用户设备统计分析

2.手机浏览器兼容性测试结果概要

3.手机网站开发中你需要注意的问题

4.推荐参考资料

5.总结

手机用户设备统计分析

拥有全面的用户数据，无疑能帮助我们做出更符合用户需求的产品。内部数据能帮我们精确了解我们的目标用户群的特征；而外部数据能告诉我们大环境下的手机用户状况，并且能在内部数据不够充分的时候给予我们一些非常有用的信息。

从外部数据来看，年月到月期间

国内浏览器品牌市场占有率前三甲为：

∙()

∙() ()

∙() ()

国内的手机操作系统前三甲为：

∙()

∙()

∙()

当然，作为中国的手机网站开发者，不能忽视强大的山寨机市场（或者应该叫作做国货精品手机市场？）。顺便提一下，这类手机通常使用的是操作系统。

（以上数据均来自）

手机浏览器兼容性测试结果概要

注意：以下所说的“大多数”是指在我们测试过的机型中，发生此类状况的手机占比达及以上，“部分”为到；“少数”为及以下。而这个概率也仅仅只限于我们所测试过的机型，虽然我们采集的样本尽量覆盖各种特征的手机，但并不代表所有手机的情况。

部分

大多数手机不支持的：

∙表单元素的“”属性

部分手机不支持的：

∙“”标签

∙“[]“标签

∙“”标签。

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

少数手机不支持的：

∙“”标签：该标签如果被赋予比较复杂的属性，可能会导致显示不正常，比如””。