《HTML5移动应用开发入门经典》—— 1.6 编写移动网站

本节书摘来异步社区《HTML5移动应用开发入门经典》一书中的第1章，第1.6节，作者：【美】Jennifer Kyrnin，更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.6 编写移动网站

HTML5移动应用开发入门经典
在某种程度上，为移动设备编写网站比过去更容易了。尽管移动设备的种类与日俱增，这包括了智能手机以及“不太智能”的手机、平板电脑、网络电视设备，甚至一些图像播放设备，但它们在所支持的HTML5特性，甚至是尺寸及形状（某种程度）上都逐渐变得通用了。

在创建移动网站时，首先需要记住的是，移动网站也只是一个网站。而最好的网站应当适用于所有浏览器及操作系统——或者说尽量多的浏览器及操作系统。

除此之外，在为移动设备创建网站时，还需要考虑到以下基本问题。

移动设备的屏幕尺寸和分辨率。
移动用户需要的内容。
使用的HTML、CSS及JavaScript是否有效且简洁。
网站是否需要为移动用户使用独立域名。
网站需要通过怎样的测试。

1.6.1 移动设备的屏幕尺寸和分辨率

移动设备的屏幕尺寸显然比台式计算机要小。通常来说，智能手机包括以下几种标准尺寸。

128×160像素——如Fujitsu DoCoMo F504i手机。
176×220像素——如HP iPAQ 510手机。
240×320像素——如Blackberry 8100或HTC Elf智能手机。
320×480像素——如Garmin-AsusA50或Palm Pre这样的PDA。
平板电脑不仅拥有越来越大的屏幕尺寸，而且在浏览方式上也有所不同。例如，大部分平板电脑（以及一些智能手机）都能够以横向或纵向模式进行浏览。这样，同一款设备，屏幕的宽度有时为1024像素，有时则为800像素或更少。

然而。通常来说，平板电脑提供了更大的屏幕空间。可以认为在大部分平板电脑设备上，屏幕尺寸为（1024～1280）×（600～800）像素。

在iPad上以标准格式浏览大部分网站都很轻松，因为其浏览器使用起来就像在计算机显示器上使用一样清晰简单。另外，iOS及Android系统中都有的缩放功能可轻易将难以阅读的微小区域放大。

1.6.2 移动用户需要的内容

在为移动设备设计网站时，需要记住用户不希望其浏览到的内容与在台式计算机上浏览到的内容总是相同。

例如，移动用户所在的位置经常发生变化。也就是说，他们通常在运动中，或是不在家中或办公室中，在访问网站时通常带着特定目标。例如，一个在车里用手机访问餐厅网站的用户通常需要很快找到餐厅的地址及电话号码。若该移动网站没有在醒目的地方标出地址及电话号码，用户会很快结束这次访问。

警告：
请不要对内容进行限制

移动网站经常爱犯的错误是在网站的移动版本上删减内容。尽管为移动用户调整内容结构，让他们能尽快找出重要信息是必要的，但若用户需要的内容并不在移动网站上，就应该让他们能够浏览网站的完整版本。
移动网站的内容不应受到限制。事实上，W3C建议“无论用户使用的是哪种设备，都应为他们提供同样的、尽可能多的合理信息及服务”。

这并是说设计人员不需要对他们的内容格式或位置进行调整，而是应当让移动用户有机会和台式机用户一样接触到同样的内容。

1.6.3 使用的HTML、CSS及JavaScript是否有效且简洁

并不需要为移动设备特意编写结构良好的XHTML，但坚持使用正确的、标准格式的HTML、CSS以及JavaScript能让页面在大部分设备中适用。另外，可以通过HTML的有效验证来确认它是否正确。

提示：
W3C验证器

位于http://validator.w3.org/的W3C验证器能够帮助检查HTML、XHTML以及其他标记语言，除此之外，它还可以验证CSS、RSS，甚至是页面上的无效链接。定期在这个验证器上检查网站，会有意外收获。
除了编写有效的HTML外，在为移动设备编写Web页面时应考虑避免以下情况。

HTML表格——由于移动设备的屏幕尺寸很小，使用水平滚动相对困难，从而导致表格难以阅读，请尽量避免在移动布局中使用表格。
HTML表格布局——通常来讲，在Web页面布局中，不应使用HTML表格，而且在移动设备中，这些表格会让页面加载速度变慢，并且影响美观，尤其是在它与浏览器窗口不匹配时。另外，在页面布局中通常使用的是嵌套表格，这类表格会让页面加载速度更慢，并且让渲染过程变得更困难。
弹出窗口——通常来讲，弹出窗口很讨厌，而在移动设备上它们甚至能让网站变得不可用。有些移动浏览器并不支持弹出窗口，还有一些浏览器则总是以意料之外的方式打开它们（通常会关闭原窗口，然后打开新窗口）。
图片布局——与在页面布局中使用表格类似，加入隐藏图像以增加空间及影响布局的方法经常会让一些老的移动设备死机或无法正确显示页面。另外，它们还会增加下载时间。
框架及图像地图（image maps）——许多移动设备都无法支持此类HTML特性。事实上，从适用性上来看，HTML5的规范中已经摈弃了框架（iframe除外）。
注意:
iOS和Android中的限制更少

尽管需要尽量避免表格、弹出窗口及图像地图，但iOS和Android上的移动页面还是能够很好地处理它们。但它们无法处理框架，因为柜架并不是HTML5的一部分。
同时，需记住移动用户通常需要为流量付费，因此Web页面应尽可能地小（以KB为单位）。使用的HTML标签、CSS属性和服务器请求越少，网站就会越受欢迎。

1.6.4 网站是否需要为移动用户使用独立域名

许多网站的移动版本都有一个独立域名，因此移动用户可以绕过常规网站直接访问其移动版。此类域名通常为m.exampe.com。

为移动网站设置独立域名有以下优点。

让人们更容易找到该移动网站。
可以为移动网站的URL进行独立宣传，制造更多访问量。
使用平板电脑或智能手机的用户通过更改域名便可访问常规网站。
与使用脚本为移动用户更改CSS样式相比，将移动用户检测出来并引导向独立域名这一方法更为轻松。
在决定如何处理移动版本的网站时，应考虑到网站维护。可以通过完全独立的页面手动创建移动域名，或使用内容管理系统。第4章将就此展开讨论。

1.6.5 网站需要通过怎样的测试

应当在尽可能多的移动设备上进行网站测试。尽管开发人员可以使用不同浏览器或模拟不同的屏幕尺寸来测试，但若不直接在移动设备上进行测试，仍有可能出现以下情况。

移动运营商的数据包大小限制使得无法加载页面或图像。
无法正确加载图像，或完全无法加载图像。
无法水平滚动（在某些手机上几乎完全无法做到）。
需要的特定设备的功能无法正常工作。
不支持文件格式。
但是要购买所有的移动设备也是不现实的，那怎么办呢？以下是一些解决方案。

使用模拟器——许多移动设备都有在线或离线模拟器，其中大部分是免费的，可以通过它们进行一些基础测试。
租用设备——可以租用不同手机来测试应用在手机上的表现。
购买一些手机——这是比较昂贵的选择，但对于计划在移动Web开发上大展鸿图的人来说，它还是一项不错的投资。
寻求朋友和同事的协助——这是测试网站的最节省成本的做法，仅需要向身边的人借用他们的手机或平板电脑，然后将网站放在在线Web服务器上进行测试。
最后，若想要进行移动开发，至少需要拥有一部移动设备来直接测试页面。在越多的设备上进行测试，网站就会变得越好。