如何删除 Opera Mobile 中的缩放图标

发布于 2024-08-02 23:26:38 字数 198 浏览 2 评论 0原文

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

谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

沩ん囻菔务 2024-08-09 23:26:38

看起来他们正在使用“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 开发者网站描述了对此的支持标签：

视口元标记
视口元标记包含有关用于查看其所包含的 HTML 页面的视口的首选设置的信息。就像任何其他元标记一样，视口位于 HTML 页面的 head 元素内 - 支持它的浏览器使用该信息来更适合该设备显示网页，而不简单地忽略它的浏览器。它最初是由 Apple 创建的，目的是改进网页在 iPhone 上的显示方式，但我们在 Opera Mobile 9.5 中添加了对它的支持，因为它是优化不同移动设备显示信息的好方法。该标签如下所示：
<元名称=“视口”内容=“宽度=设备宽度，高度=设备高度”/>
它包含的只是元属性和内容属性，前者指定这是一个视口元标记，后者包含您要为此页面指定的不同值的逗号分隔列表。您可以指定的不同信息如下：
宽度和高度：这些指定应为此网页设置的视口的宽度和高度。这些值可以以像素为单位设置，也可以分别使用 device-width 和 device-height 值来指定宽度和高度应设置为设备屏幕的完整宽度和高度。宽度的默认值为 980 像素，可以设置为 200 到 10,000 像素。高度的默认值是根据设备的宽度及其宽高比计算得出的，可以设置为 223 到 10,000 像素。
initial-scale：设置网页首次显示时的初始比例。默认情况下，它只会填满设备的整个屏幕，除非您故意进行其他设置。
最小比例和最大比例：它们指定允许用户放大和缩小的最小和最大量，它们的值是乘数。最小比例的默认值为 0.25，其值的范围可以从略高于零到 10.0。 Maximum-scale 的值范围也可以从略高于 0 到 10.0。
user-scalable：指定是否允许用户放大和缩小 - 可能的值为 yes 和 no，其中 yes 为默认值。
Opera Mobile 9.5 完全支持视口元标记，并具有一些值得注意的特定行为。它忽略了用户可扩展、最小比例和最大比例，因为我们认为缩放是一项浏览器功能，应该始终可供用户使用。此外，由于页面标题部分中视口元标记的存在表明作者已经针对移动设备进行了优化，因此不应用小屏幕渲染。这意味着无论“移动视图”打开还是关闭，启用视口的页面看起来都完全相同。
建议不要对单个设备（例如 iPhone）硬编码宽度和高度值；相反，您应该将它们的值设置为设备宽度和设备高度，以便您的页面也可以在 VGA、QVGA、WVGA 和 WQVGA 设备上正常工作。

It looks like they are using the "viewport" meta tag to specify the width of the page. This probably is set to smaller than mobile Opera's available scren width, so the Zoom button is not needed.

Here is the tag as it is used on the mobile version of Opera.com:

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

To keep your page from scaling, I would set the tag to be as follows:

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

Although keeping the user from scaling would not be my first choice UI-wise.

The opera developer site describes the support of this tag:

The viewport meta tag
The viewport meta tag contains information about the preferred settings of the viewport for viewing the HTML page it is contained within. Just like any other meta tag, viewport sits inside the head element of your HTML page—browsers that support it use the information to display the web page more appropriately for that device, while browsers that don’t simply ignore it. It was originally created by Apple to improve the way web pages display on the iPhone, but we have added support for it in Opera Mobile 9.5 because it is a good way of optimizing display information for different mobile devices. The tag looks like so:
<meta name = "viewport" content = "width = device-width, height = device-height" />
All it contains is the meta attribute, which specifies that this is a viewport meta tag, and the content attribute, which contains a comma-delimited list of the different values you want to specify for this page. The different pieces of information you can specify are as follows:
width and height: These specify the width and height that the viewport should be set at for this web page. The values can be set in pixels, or you can use the device-width and device-height values, respectively, to specify that the width and height should be set as the full width and height of the device’s screen. The default value of width is 980 pixels, and it can be set from 200 to 10,000 pixels. The default value of height is calculated from the width of the device and its aspect ratio, and it can be set from 223 to 10,000 pixels.
initial-scale: This sets the initial scale of the web page when it is first displayed. By default it just fills up the whole screen of the device, unless you deliberately set it otherwise.
minimum-scale and maximum-scale: These specify the minimum and maximum amounts that the user is allowed to zoom in and out, their values being multipliers. minimum-scale has a default value of 0.25, and its value can range from just above zero to 10.0. maximum-scale’s value can also range from just above zero to 10.0.
user-scalable: Specifies whether the user is allowed to zoom in and out—possible values are yes and no, with yes being the default.
Opera Mobile 9.5 fully supports the viewport meta tag, with a few notable specific behaviours. It ignores user-scalable, minimum-scale and maximum-scale because we believe that zooming is a browser feature that should always be available for users. Also, as the presence of the viewport meta tag in the page’s head section indicates the author has taken care of optimizing for mobile, small screen rendering is not applied. This means that viewport-enabled pages will look exactly the same whether “Mobile view” is switched on or off.
It is recommended that width and height values are not hardcoded for a single device, such as the iPhone; instead you should set their values to device-width and device-height, so that your pages also work nicely on VGA, QVGA, WVGA and WQVGA devices.

回复收藏 0 原文

~没有更多了~