手机网站页面制作更应当符合WEB尺度

CNZZ.TW核心提示：

网页制作CNZZ.TW文章简介：手机网站前端开发经验总结.

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

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

手机网站开发，有着很多不为人知的艰苦：

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

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

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

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

留心：由于手机网站发展敏捷，请参阅者留心本篇文章的宣布时间。

目录

手机用户设备统计分析
手机浏览器兼容性测试成果概要
手机网站开发中你需要留心的标题
推荐参考材料
总结

手机用户设备统计分析

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

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

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

Nokia(78%)
Opera(OEM) (10%)
iPhone(Safari) (3%)
国内的手机把持系统前三甲为：

Nokia SymbianOS(80%)
iPhoneOS(6%)
SonyEricsson(5%)
当然，作为中国的手机网站开发者，不能疏忽强盛的山寨机市场（或者应当叫作做国货精品手机市场？）。顺便提一下，这类手机通常应用的是MTK把持系统。

（以上数据均来自statcounter.com）

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

留心：以下所说的“大多数”是指在我们测试过的机型中，产生此类状态的手机占比达50%及以上，“部分”为20%到50%；“少数”为20%及以下。而这个概率也仅仅只限于我们所测试过的机型，固然我们采集的样本尽量笼罩各种特点的手机，但并不代表所有手机的情况。

XHTML部分

大多数手机不支撑的：

表单元素的“disable”属性
部分别机不支撑的：

“button”标签
“input[type=file]“标签
“iframe”标签。
固然只有部分别机不支撑这几个标签，但由于这些标签在页面中往往具有非常重要的功效，所以属于高危标签，要谨严应用。

少数手机不支撑的：

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

CSS部分

大部分别机不支撑的：

“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完整不支撑；

JavaScript部分

这部分测试相对不那么让人抓狂，要么干脆不支撑，假如支撑的话，对基础的dom把持、事件等支撑度都还不错。但我们没有测试过很复杂的脚本。

在我们测试过的手机当中，支撑（包含不完整支撑）JavaScript的手机比例大约在一半左右，当然，对于我们来说，最重要的不是这个比例，而是要如何做好JavaScript的优雅降级。

其他

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

开发中你需要留心的标题

手机网页编码需要遵守什么规范？
遵守XHTML Mobile Profile规范（WAP-277-XHTMLMP-20011029-a.pdf），简称为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。
用手机模仿器和第三方手机浏览器的在线模仿器来测试页面是不是靠谱？
有 条件的话，我们当然建议在手机实体上进行测试，由于目标客户群的手机设备总是在不断变更的，这些手机模仿器通常不能完整准确的模仿页面在手机上的显示情 况，比如图片色彩，页面大小限制等就很难再模仿器上测试出来。当然，一些第三方手机浏览器的在线模仿器还是可以进行测试的，第三方浏览器相对来说受手机设 备的影响较小。

推荐参考材料

开发权威网站

WAPForum：XHTML Mobile Profile规范.pdf
WAPForum：WCSS规范.pdf
W3C：XHTML Basic 1.1规范.html
W3C：Mobile Web Test Suites Working Group.html
PPK：关于手机浏览器兼容性的测试和研究.html
Developershome：XHTML MP 教程.html （汉化版）

经典开发文章

Unknown：移动WAP相干标记语言的演进.jpg
Flora Graham：Alternative mobile browsers tested.html
Lucas Pettinati(Yahoo)：Challenges of Interface Design for Mobile Devices.html
Holly Kolman：How to Make a Click to Call Link.html
Brian Suda：Introduction to the Mobile Web.html

手机型号查询

handsetdetection：手机查询.html 机型很全，偏国外机型，参数较多
mobile9：手机查询.html 机型较全，偏门机型可能无内容
试手机网：手机查询+模仿.html 机型稍少，可以模仿手机把持

总结

目前来说，手机网站开发是个典范的设备驱动开发的过程，页面被设计成什么样，能做到怎么样，几乎全取决于目标客户的手机设备情况。

所以，对手机设备的懂得，对于设计开发过程有着直观重要的作用，对于前端来说，就需要有打算的进行长期的手机浏览器兼容性测试，什么样的设计能被实现，什么样的标签可以应用，这些都需要有数据的支撑。

我们必需有这样的认知，开发的手机网页总是会在或多或少的手机设备上呈现标题，由于我们永远无法知道所有用户的手机设备情况，所以我们更要尽量的遵守尺度进行开发，这样才干将满足用户的比例做到最好。

任何一个范畴都有值得你进行深进懂得的处所，即使现在看起来，手机网站的开发回有点不进主流，但我信任，随着手机设备的更新换代，总有一天它也会成为我们占据客户的一个重要战场，iphone这类有符合web尺度的浏览器的手机宣布，也给了我们更多的信心。

总之，革命尚未成功，同道仍需努力。顺祝大家新年快活！