2

我正在为 Opera Mobile 设计一个网页。它的左右角有一个小缩放图标。当我访问 www.opera.com 时，这个图标变得不可见并且缩放级别变得固定。对于任何其他网页，它都会出现，我可以放大和缩小页面。我也希望在我的页面中具有相同的固定缩放行为。它可能是一些 CSS 属性。你知道我应该设置哪些属性以及在哪些对象上？或者你认为会有另一种方法来实现这一点。

谢谢你。

4

1 回答 1

2

看起来他们正在使用“viewport”元标记来指定页面的宽度。这可能设置为小于移动 Opera 的可用屏幕宽度，因此不需要缩放按钮。

以下是 Opera.com 移动版上使用的标签：

<meta name="viewport" content="width=320" />

为了防止您的页面缩放，我将标签设置如下：

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

尽管阻止用户缩放不是我的首选 UI。

Opera 开发者网站描述了对这个标签的支持：

视口元标记

viewport 元标记包含有关查看包含在其中的 HTML 页面的视口的首选设置的信息。就像任何其他元标记一样，视口位于 HTML 页面的 head 元素内——支持它的浏览器使用该信息来更适合该设备显示网页，而浏览器不会简单地忽略它。它最初由 Apple 创建，用于改进网页在 iPhone 上的显示方式，但我们在 Opera Mobile 9.5 中添加了对它的支持，因为它是优化不同移动设备显示信息的好方法。标签看起来像这样：

<元名称=“视口”内容=“宽度=设备宽度，高度=设备高度”/>

它只包含 meta 属性，它指定这是一个视口元标记，以及 content 属性，它包含您要为此页面指定的不同值的逗号分隔列表。您可以指定的不同信息如下：

  • 宽度和高度：这些指定应为此网页设置视口的宽度和高度。这些值可以以像素为单位设置，也可以分别使用 device-width 和 device-height 值来指定宽度和高度应设置为设备屏幕的全宽和全高。宽度的默认值为 980 像素，可设置为 200 到 10,000 像素。高度的默认值是根据设备的宽度及其纵横比计算得出的，可以设置为 223 到 10,000 像素。
  • initial-scale：设置网页首次显示时的初始比例。默认情况下，它只会填满设备的整个屏幕，除非您故意设置它。
  • minimum-scale 和 maximum-scale：它们指定允许用户放大和缩小的最小和最大量，它们的值是乘数。minimum-scale 的默认值为 0.25，其值的范围可以从略高于零到 10.0。maximum-scale 的值的范围也可以从略高于零到 10.0。
  • user-scalable：指定是否允许用户放大和缩小——可能的值是yes 和no，yes 是默认值。

Opera Mobile 9.5 完全支持视口元标记，具有一些值得注意的特定行为。它忽略了用户可缩放、最小缩放和最大缩放，因为我们认为缩放是一种浏览器功能，应该始终可供用户使用。此外，由于页面头部中 viewport 元标记的存在表明作者已针对移动设备进行了优化，因此未应用小屏幕渲染。这意味着无论“移动视图”打开还是关闭，启用视口的页面看起来都完全相同。

建议不要为单个设备（例如 iPhone）硬编码宽度和高度值；相反，您应该将它们的值设置为 device-width 和 device-height，以便您的页面在 VGA、QVGA、WVGA 和 WQVGA 设备上也能正常工作。

于 2009-08-26T21:09:37.263 回答