我正在为 Opera Mobile 设计一个网页。它的左右角有一个小缩放图标。当我访问 www.opera.com 时,这个图标变得不可见并且缩放级别变得固定。对于任何其他网页,它都会出现,我可以放大和缩小页面。我也希望在我的页面中具有相同的固定缩放行为。它可能是一些 CSS 属性。你知道我应该设置哪些属性以及在哪些对象上?或者你认为会有另一种方法来实现这一点。
谢谢你。
我正在为 Opera Mobile 设计一个网页。它的左右角有一个小缩放图标。当我访问 www.opera.com 时,这个图标变得不可见并且缩放级别变得固定。对于任何其他网页,它都会出现,我可以放大和缩小页面。我也希望在我的页面中具有相同的固定缩放行为。它可能是一些 CSS 属性。你知道我应该设置哪些属性以及在哪些对象上?或者你认为会有另一种方法来实现这一点。
谢谢你。
看起来他们正在使用“viewport”元标记来指定页面的宽度。这可能设置为小于移动 Opera 的可用屏幕宽度,因此不需要缩放按钮。
以下是 Opera.com 移动版上使用的标签:
<meta name="viewport" content="width=320" />
为了防止您的页面缩放,我将标签设置如下:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no" />
尽管阻止用户缩放不是我的首选 UI。
视口元标记
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 设备上也能正常工作。