移动网页如何工作

技术和互联网速度在区分移动平台与完整计算机方面起着重要作用，但最终都归结为尺寸。即使对角线测量超过四英寸（10.2厘米）的最大智能手机屏幕，与电脑显示器相比也微不足道。虽然这些显示器的图像分辨率持续增长，但它们的物理尺寸太小，无法清晰地显示整个网站。在上面阅读需要放大，而且现代网站的多列布局常常使导航和内容消费变得困难。最佳的网站可用性来自于对平台决定性特征的理解。对于移动设备而言，这始于屏幕尺寸。

移动网页设计必须专注于单列布局，将所有内容压缩成一个紧凑的排列。这可能需要重新排列导航链接、删除次要页面元素，并使主列更窄以适应手机的尺寸。虽然显示器通常是宽于高的，但大多数手机屏幕设计用于纵向方向——你总是可以把手机侧过来浏览网站，但移动布局需要考虑默认纵向的狭窄性。布局并非唯一的考虑因素——由于移动设备不像PC那样使用鼠标，像下拉菜单这样的“鼠标悬停状态”必须重新设计，以适应触摸输入或手机按钮 [来源：Smashing Magazine]。

最后一点引出了移动网站设计的另一个挑战：浏览器和硬件的多样性。仅仅构建一个考虑到Internet Explorer、Mozilla Firefox和Google Chrome等浏览器特性的完整网站就已经够难的了。在移动世界中，有些人使用屏幕小、分辨率低的“傻瓜手机”浏览网页；另一些人则使用具有更高分辨率显示器和触摸屏的智能手机！有时一个移动网站是不够的——为各种设备设计单独的移动界面是明智之举。Facebook，例如，通过检测访问设备的性能，向智能手机访问者提供量身定制的网站 [来源：PC World]。我们将在下一节介绍这背后的技术。

尽管移动网页设计需要一个简化的界面，但这并不一定意味着网站功能被简化。相反，智能手机提供了电脑上没有的高级功能。手机摄像头扫描QR码可以立即启动网站或下载应用程序。地图可以结合GPS数据为你提供附近餐馆的方向或推荐。在幕后需要巧妙地运用技术才能创建一个高效的移动网站。让我们看看技术和设计是如何相辅相成的。

移动网站因其设计而易于识别，但在某个地方，有人为这个产品投入了大量巧妙的工程设计。现代网页设计通常使用层叠样式表（CSS）构建。顾名思义，样式表控制页面的样式元素——字体、文本颜色、页面宽度、边距等等。虽然你网站的内容可能存储在数据库或HTML文件中，但CSS决定了这些内容的呈现方式。上一节中提到的所有设计更改都是通过CSS实现的，并且可以进行其他调整以优化移动设备的浏览体验。例如，用简单的纯色替换大的图像背景，将使移动网站加载更快并使用更少的带宽。

构建一个移动网站是第一步。一旦网站存在，访问者就必须使用它。提供移动网站没有明确的正确方法，但有几种可行的选择。最简单的方法是在完整网站的某个地方放置一个链接，上面写着“查看移动网站”。开发者通常使用子域名——通常是m.website.com——来引导用户访问移动网站。这很容易理解。Website.com指向完整网站，m.website.com指向移动网站。有些网站因为iPhone的流行而使用i.website.com，但实现方式完全相同。虽然许多网站使用系统自动将移动浏览器引导到移动网站（如下所述），但有时访问该移动网站的唯一方法是手动输入m.website.com地址。有关如何处理网站地址的更多信息，请参阅我们关于域名服务器如何工作的文章。

提供移动页面的其他技术更为复杂。许多网站会自动检测您正在使用的设备类型，以决定提供哪个CSS文件。这可以通过查询设备并确定某些识别因素——例如屏幕有多少像素宽——或通过读取用户代理字符串来完成，用户代理字符串声明了正在使用什么浏览器加载网页 [来源：Smashing Magazine]。“媒体查询”是层叠样式表中的代码行，它们引用用户代理字符串以选取这些识别因素之一。如果用户代理将自己识别为具有特定屏幕宽度的移动浏览器，则该信息可用于确定加载哪种网页。这些方法并非总是完美无缺——某些浏览器允许您“欺骗”用户代理，并且新浏览器总是会带来新的用户代理字符串——但总的来说，如果网站服务器有移动网站可提供，它们通常会正确地将移动网站发送到移动设备。这种识别方法可以与另一个选项结合起来：给用户一个选择。在移动设备上导航到IMDB.com会自动加载移动网站，但会提示用户下载提供更多功能的移动应用程序。

以上是构建和提供移动网站的基础知识。但除此之外还有更多内容。因为使用手机与使用电脑大相径庭，所以在将传统网页元素引入移动网站时存在挑战。下一页将介绍移动浏览器以及构成现代网页的密码字段、表单和Flash视频等交互元素的优缺点。

移动网站在智能手机上的表现不可避免地优于其完整网站版本，因为它们是为小型设备量身定制的。“一刀切”绝非最佳解决方案。话虽如此，移动网站在移动设备上并非总是“优于”完整网站。由于这些网站是为手机上的便捷浏览而设计的，因此它们考虑了这些设备的限制，从而提供了受限的体验。例如，移动网站的导航不会总是像常规导航那样易于访问，因为屏幕空间不足以使其始终可见。

与网站互动可能是移动浏览体验中最困难的部分。在手机上滚动输入表格、选择单个字段并输入内容所需的时间远长于在电脑上。触摸屏和软件键盘使这个问题更加突出。值得庆幸的是，手机浏览器可以像桌面浏览器一样存储Cookie和记住密码，这使得移动体验稍微轻松了一些。一些为手机构建的浏览器，它们有桌面版本，如Android版Firefox和Opera Mobile，可以同步计算机浏览器设置中的密码和其他保存数据。这是传输数据并简化移动和完整网站浏览体验的好方法。现代智能手机还有一些让导航愉快的技巧：双指缩放可以轻松放大文本区域，大多数浏览器使用“点击缩放”功能，可缩放到段落的精确宽度。

当谈到移动网页浏览时，Flash不可避免地会进入讨论。Flash视频对处理器和电池寿命要求很高，但多年来已有所改进，现在可以在许多移动设备上运行——但Apple制造的任何设备除外。Apple不允许Flash视频在iOS上播放，而是支持HTML5视频，许多视频网站如YouTube已经在使用HTML5视频。虽然Flash视频可以嵌入到移动网页中，但这种做法与移动设计最大的优势——简洁性——背道而驰。轻量级移动网站加载速度快，因为它们主要由文本和小型图片组成。此外，在您的移动网站上放置Flash意味着限制了iPhone用户与您的网页互动的方式。

尽管网页设计师必须仔细选择要显示的内容以及如何安排移动页面，但移动网页体验与实际体验并没有太大不同。广告在移动网站上也有效，尽管显然像Google AdSense这样的系统比大型弹出广告更适合小型网站。在智能手机上浏览永远不会像使用鼠标、键盘和大显示器那样高效，但它们总是在手边。良好的移动设计使体验尽可能地无痛。