这是 Firefox 移动团队的 Matt Brubeck 的客座文章。

即将发布的 Firefox 移动版 (Fennec) 1.1 版本改进了
对 <meta name="viewport"> 标签的支持。Fennec 的早期版本支持 width、height 和 initial-scale 视口属性，但对于一些为 iPhone 和 Android 浏览器设计的网站存在 问题。我们现在支持与 Mobile Safari 相同的属性，并且还更改了 Fennec，使其能够在不同尺寸和分辨率的屏幕上更一致地呈现移动网站。

touch.facebook.com 之前

touch.facebook.com 之后

您可以在最新的 Fennec 1.1 和 trunk nightly 版本中亲自体验这些更改，适用于 Maemo、Android、Windows、Mac 或 Linux。

背景

像 Fennec 这样的移动浏览器在虚拟“窗口”（视口）中呈现页面，通常比屏幕宽，因此它们不需要将每个页面布局都挤压到一个小窗口中（这会导致许多非移动优化的网站出现问题）。用户可以平移和缩放以查看页面的不同区域。

Mobile Safari 引入了“视口元标签”，让 Web 开发人员可以控制视口的大小和缩放比例。许多其他移动浏览器现在都支持此标签，尽管它不是任何 Web 标准的一部分。Apple 的 文档 对 Web 开发人员如何使用此标签进行了很好的解释，但我们必须进行一些调查工作才能确切了解如何在 Fennec 中实现它。例如，Safari 的文档称内容是“逗号分隔的列表”，但现有的浏览器和网页使用逗号、分号和空格的任意组合作为分隔符。

视口基础知识

一个典型的移动优化网站包含如下内容

width 属性控制视口的大小。它可以设置为特定数量的像素，例如 width=600，或者设置为特殊值 device-width，该值是在 100% 缩放比例下屏幕的宽度（以 CSS 像素为单位）。（存在相应的 height 和 device-height 值，这些值可能对页面中基于视口高度更改大小或位置的元素有用。）

initial-scale 属性控制页面首次加载时的缩放级别。maximum-scale、minimum-scale 和 user-scalable 属性控制用户允许放大或缩小页面的程度。

像素并非像素

iPhone 和许多流行的 Android 手机拥有 3 到 4 英寸（7-10 厘米）的屏幕，分辨率为 320×480 像素（约 160 dpi）。Maemo 版 Firefox 运行在诺基亚 N900 上，该手机具有相同的物理尺寸，但分辨率为 480×800 像素（约 240 dpi）。因此，Fennec 的最后一个版本显示许多页面比 iPhone 或 Android 小大约三分之一（以实际物理尺寸计算）。这导致许多触控优化的网站出现可用性和可读性问题。Peter-Paul Koch 在 像素并非像素 中写到了这个问题。

Maemo 版 Fennec 1.1 将为每个 CSS“像素”使用 1.5 个硬件像素，借鉴了 Android 基于 WebKit 的浏览器的做法。这意味着具有 initial-scale=1 的页面将在 Maemo 版 Fennec、iPhone 版 Mobile Safari 和 Android 浏览器（在 HDPI 和 MDPI 手机上）中以接近相同的物理尺寸呈现。这与 CSS 2.1 规范 一致，该规范指出

如果输出设备的像素密度与典型计算机显示器的像素密度差异很大，则用户代理应重新缩放像素值。建议像素单位指的是最接近参考像素的设备像素的整数。建议参考像素是在像素密度为 96dpi 且与阅读者距离为臂长的设备上一个像素的视角。

对于 Web 开发人员而言，这意味着在所有上述手持设备上，320px 在纵向模式下以 scale=1 的比例显示为全宽，他们可以相应地调整其布局和图像的大小。但请记住，并非所有移动设备的宽度都相同；您还应确保您的页面在横向模式下以及在 iPad 和 Android 平板电脑等更大设备上都能正常工作。

在 240 dpi 屏幕上，具有 initial-scale=1 的页面将由 Fennec 和 Android WebKit 有效地缩放至 150%。它们的文本将流畅清晰，但它们的位图图像可能无法利用全屏幕分辨率。为了在这些屏幕上获得更清晰的图像，Web 开发人员可能希望以最终尺寸的 150%（或 200%，以支持传闻中的 320 dpi iPhone）设计图像或整个布局，然后使用 CSS 或视口属性将其缩小。

目前，Fennec 在所有设备上都使用相同的默认比率 1.5。（这是一个隐藏的偏好设置，可以在 about:config 中或通过加载项更改。）稍后，我们需要更改此设置（以及 Fennec 用户界面的许多其他部分），以便在像素密度不同的屏幕上正常工作。请注意，默认比率 1.5 仅在视口比例等于 1 时才有效。否则，CSS 像素与设备像素之间的关系取决于当前缩放级别。

视口宽度和屏幕宽度

许多网站将其视口设置为 "width=320, initial-scale=1" 以精确地适应 iPhone 显示屏的纵向模式。如上所述，当 Fennec 1.0 呈现这些网站时，这会导致 问题，尤其是在横向模式下。为了解决此问题，Fennec 1.1 将根据需要扩展视口宽度以在请求的比例下填充屏幕。这与 Android 和 Mobile Safari 的行为一致，并且在 iPad 等大屏幕设备上尤其有用。（Allen Pike 的 为 iPad 网站选择视口 对 Web 开发人员进行了很好的解释。）

对于设置初始或最大缩放比例的页面，这意味着 width 属性实际上转换为最小视口宽度。例如，如果您的布局需要至少 500 像素的宽度，则可以使用以下标记。当屏幕宽度超过 500 像素时，浏览器将扩展视口（而不是放大）以适应屏幕

Fennec 1.1 还增加了对 minimum-scale、maximum-scale 和 user-scalable 的支持，其默认值和限制与 Safari 的类似。这些属性会影响初始缩放比例和宽度，以及限制缩放级别的变化。

移动浏览器处理方向更改的方式略有不同。例如，Mobile Safari 通常在从纵向更改为横向时仅缩放页面，而不是像最初在横向加载时那样布局页面。如果 Web 开发人员希望其缩放设置在 iPhone 上切换方向时保持一致，则必须添加 maximum-scale 值以防止此缩放，这有时会产生不希望有的副作用，即阻止用户放大

在 Fennec 中，这没有必要；当设备更改方向时，Fennec 会根据其新的“窗口”尺寸更新视口大小、页面布局以及 device-width 等 JavaScript/CSS 属性。

标准

显然对视口元标签有需求，因为它受大多数流行的移动浏览器支持，并被数千个网站使用。为网页控制视口属性制定真正的标准将是一件好事。根据 HTML5 规范，对 meta 元素的扩展应首先在 WHATWG wiki 上注册，然后通过 W3C 标准化流程。如果发生这种情况，那么 Mozilla 将努力确保我们能够实施标准化过程中做出的任何更改。