领先技术

  • 项目

移动站点开发： 标记

Dino Esposito

 

Dino Esposito
随着用于浏览 Web 的设备越来越多，建立一个移动优化网站正在成为关乎企业成败的重要因素。让我们面对现实： 即使使用最新型的智能手机，浏览桌面站点也会遇到很多问题。您需要平移和缩放以查看完整内容和打开链接。尽管这确实能查看内容，但没有提供最佳的用户体验。

我使用智能手机浏览桌面站点，如果可能的话，我常常更希望查看完整版本，而不是移动版本。我这样做有一个主要原因： 移动站点通常并不像桌面站点那样设计完善。作为经常浏览站点的用户，您一定对此抱着很大的期望。您希望能够找到在站点上呈现的所有内容，而无论使用什么方法访问站点。如果使用移动设备访问站点，理想情况下，您希望能获得相同的服务水平但要考虑到您的当前状态（作为移动用户）：可能在路上、匆匆忙忙或使用速度缓慢的连接。

这恰恰就是移动站点架构师和开发人员要面对的挑战。移动站点的最大问题并不一定是功能实现。通常，移动站点中的每个页面所需的功能和操作都比桌面站点少，代码行越少就意味着问题也越少。不过，为了提供极佳的用户体验，甚至比桌面站点更迫切地需要使用普遍要求的功能。确保在移动设备上提供极佳的用户体验可能是一个巨大挑战，团队通常得仰仗非常精巧的编码和设计解决方案。

此外，移动站点可能还需要为各种不同的设备提供服务。如果在几年前处理不同的桌面浏览器就曾让您望而却步，试想一下现在的移动空间，您可能处理的不同设备配置文件增加了几千倍。（不过，这并不意味着，您必须布置数千个不同的页面版本，您只需将这些数以千计的设备配置文件缩减到几个以不同方式处理的设备类别。）

本文是我编写的系列文章的第一篇文章，我尝试从不主要侧重于技术的角度阐述移动站点开发。我发现移动站点开发往往与特定的框架及其解决方案相关，而没有过多地考虑用例和内容重构。在本文中，我从基础知识入手，即，移动标记。

浏览器和视区

默认情况下，今天的大多数移动浏览器呈现页面的视区远大于实际设备屏幕尺寸。实际视区宽度因浏览器而异，但始终在 1,000 像素左右。例如，Safari for iPhone 和 Internet Explorer 9 中已知为 980 像素，而 Android WebKit 上为 800 像素。作为移动开发人员，您的首要任务是应了解视区的作用和来源。图 1 显示了移动浏览器如何使用视区。

How Mobile Browsers Use the Viewport
图 1 移动浏览器如何使用视区

视区是浏览器在其中呈现任何内容的固定宽度区域。视区大小与实际屏幕尺寸没有必然联系。这在桌面浏览器中并不是什么大问题，但在小得多的移动设备屏幕上会成为问题。浏览器往往在自己的任意内部视区尺寸上呈现页面。但在显示时，它们将缩小视区以使整个内容都位于实际屏幕尺寸内。

实际效果是，作为用户，您需要水平和垂直滚动以查看内容，或者需要放大以看清楚内容，更重要的是，使您自己能够打开链接。要了解有关浏览器中的视区的内部实现的详细信息，一个非常好的资源是 bit.ly/bZYlKb。

视区和标记

在移动站点开发初期，使用的标记与桌面站点不同。这些年来，我们的移动站点已从使用无线标记语言 (WML) 转变为紧凑 HTML (cHTML)，最后又转变为可扩展的 HTML (XHTML)。在所有这些情况下，将向浏览器提供不同的多用途 Internet 邮件扩展 (MIME) 类型。在此基础上，浏览器可以确定将要接收的内容类型并相应地进行呈现。随着 iPhone 的问世，很明显，移动设备的功能可以与便携式计算机相媲美，至少在呈现网页方面。但向移动和桌面浏览器提供相同的标记会产生不同的屏幕尺寸问题，而移动用户不得不根据需要放大和缩小内容。

如果桌面和移动请求使用相同的 MIME 类型 (text/html)，则浏览器无法再使用 MIME 类型确定您是打算将内容放在桌面还是移动大小视区中。这就是 Apple Inc. 几年前推出视区 meta 标记的原因。现在，视区 meta 标记已成为实际标准，任何旨在作为移动页面的页面都应设置该标记。下面是您通常使用视区标记的方式：

<meta name="viewport" content="width=device-width" />

meta 标记的 content 属性设置为一个表达式，可以在其中将几个属性设置为特定的值。 其中的最重要属性是 width。 浏览器使用 width 属性动态地设置其视区的大小。 您可以将 width 属性设置为特定的像素数，或者设置为特殊表达式，如前面的示例中所示。 尤其是，值 device-width 表示屏幕的宽度（像素）。 请注意，在这种情况下，像素旨在作为与设备无关的像素或 CSS 像素。 在具有高密度像素的设备上，将强制重新缩放浏览器，宽度 100 像素可能会涵盖大约 150 或甚至 200 实际像素。 图 2 列出了视区表达式中支持的属性。

图 2 视区表达式中的属性

属性 说明
width 使用与设备无关的像素表示所需的视区宽度。 它可以是明确的数字（如 240）或最好是相对值，如 device-width。
height 使用与设备无关的像素表示所需的视区高度。 它可以是明确的数字（如 320）或最好是相对值，如 device-height。
initial-scale 表示首次加载页面时所需的缩放级别。 值 1 表示应使用自然大小呈现页面，根本不进行缩放。 值 2 将页面大小加倍，依此类推。 您也可以使用十进制值，例如“1.0”。
minimum-scale 表示页面允许的最低缩放级别。 值 1 表示用户不能将页面缩小到低于自然大小。
maximum-scale 表示页面允许的最大缩放级别。 最大值为 10.0。
user-scalable yes/no 属性，用于表示是否允许用户缩放页面。

有些浏览器可能具有额外的属性。 特别是，Android 浏览器还能识别 target-densitydpi 属性，开发人员可通过该属性提供页面所需的屏幕分辨率。 这可能有助于 Android 浏览器优化基于像素的资源缩放，如图像。 target-densitydpi 属性可以设置为特定的数字或特殊值，如 device-dpi。

下面是设置视区 meta 标记的更具体的方式：

    <meta name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1"/>

通常不使用 height 属性。 如果要将元素放置在屏幕底部或依赖于视区高度的位置，您通常会使用该属性。 最后，请注意，如果将 user-scalable 设置为“no”，则会在该页面上禁用挤压缩放功能。

视区 meta 标记现在是很常见的，但在过去，某些浏览器使用其他 meta 标记（如 HandheldFriendly 和 MobileOptimized）来实现相同的目的：

    <meta name="HandheldFriendly" content="true" /> 
    <meta name="MobileOptimized" content="320" />

万维网联盟 (W3C) 正在拟订一份文件以标准化视区元素。 您可以在 bit.ly/AavTG5 中查阅最新的草稿。

HTML 和 XHTML 移动配置文件

视区和其他 meta 标记的最终目标是，表示开发人员要在上面呈现内容的视区大小。 如果要向移动浏览器提供普通 HTML 标记，则可以使用 meta 标记。 如果由于某种原因提供移动标记就可以了，则不需要使用 meta 标记，但仅限于具有 XHTML 移动配置文件 (MP) DOCTYPE 的文档：

    <!DOCTYPE html PUBLIC
      "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
      "http://www.openmobilealliance.org/tech/DTD/xhtmlmobile12.dtd">

XHTML MP 的 MIME 类型是“application/vnd.wap.xhtml+xml”。与普通 HTML 的表现形式相比，XHTML MP 已经过时了，因为它在文档对象模型 (DOM) 操作和一些重要方面（如 CSS 和 JavaScript 支持）存在一些限制。

适用于今天的大多数设备的最新标准是，使用具有视区标记的 HTML。 不过，您的站点可能会向大量的设备开放，包括不支持 HTML 或视区标记的旧设备。 您如何处理这种情况呢？

不必拐弯抹角，您需要通过存储有关移动浏览器功能的信息的特殊数据库获得一些帮助。 这些数据库称为设备描述存储库 (DDR)。 无线通用资源文件 (WURFL)（Facebook 使用的是 DDR）具有一个名为 preferred_markup 的属性，它可以在服务器上查询（例如，从 ASP.NET 应用程序中）以确定向请求的设备提供的最适合标记。 您可以在 wurfl.sourceforge.net 中了解有关 WURFL 的详细信息。 我打算在将来的专栏中介绍 WURFL 和其他 DDR，如 51Degrees。

HTML5 和移动浏览器

HTML5 是一种标记语言，新型移动浏览器可以很好地支持这种标记语言，至少在目前的标准状态下。 这适用于智能手机中嵌入的浏览器（如 iPhone 和 iPad 上的 Safari、Windows Phone 上的 Android WebKit 和 Internet Explorer 9）以及外部浏览器，如 Fennec（Firefox 的移动版本）和 Opera Mobile。

特别是，您可以访问 mobilehtml5.org 以了解各种移动浏览器上的 HTML5 支持的详细对比。 您会看到，Canvas 和 SVG 支持几乎是无处不在的，而 iOS 5 上可以很好地支持输入元素（这在移动页面上是至关重要的），但当前版本的 Android WebKit 上不支持。 本地存储、地理位置和多媒体也几乎是无处不在的。

没那么智能

人们通常将移动站点简单地当作是现有桌面站点的衍生品。 因此，大多数设计是从桌面站点的角度完成的，同时假设客户端也像桌面浏览器那样“智能”（或丰富和强大）。 但是，智能手机并不像便携式计算机那样“智能”。 这种较大的差异是移动站点开发的一个重要方面。 因此，在开始移动站点项目时，首先要考虑的就是涵盖的用例和针对的设备。 您可能需要使用的任何技术以后会不断出现。 在将来的专栏中，我将讨论确定特定移动用例、移动开发方式和设备相关呈现的技术。

Dino Esposito是《Architecting Mobile Solutions for the Enterprise》（Microsoft Press，2012 年）和《Programming ASP.NET MVC 3》（Microsoft Press，2011 年）的作者，同时也是《Microsoft .NET： Architecting Applications for the Enterprise》（Microsoft Press，2008 年）的合著者。 Esposito 定居于意大利，经常在世界各地的业内活动中发表演讲。 有关他的情况，请访问 Twitter 上的 twitter.com/despos。

衷心感谢以下技术专家对本文的审阅： Shane Church 和 Steve Sanderson