捏合/缩放视口规范适用于 iPhone，但不适用于 Android

发布于 2024-12-25 17:33:05 字数 360 浏览 1 评论 0原文

我不久前在一家帆船公司创建了一个 WordPress 网站，xssailing.com，目前将视图端口设置为：

<meta name="viewport" content="user-scalable=yes;width=device-width; initial-scale=0.31; maximum-scale=1.0;"/>

该网站在计算机上运行良好，我可以在 iPhone/iPad 上进行捏合和缩放。当我用 Kindle 访问该网站时，我无法像在其他网站上那样进行捏合和缩放。有什么想法吗？

谢谢！

原文

I made a WordPress site a while back from a Sailing Company, xssailing.com and currently have the view port set as:

<meta name="viewport" content="user-scalable=yes;width=device-width; initial-scale=0.31; maximum-scale=1.0;"/>

The site works fine on a computer and I can pinch and zoom fine on an iPhone/iPad. When I visit the site with my kindle I cannot pinch and zoom like I can on other sites. Any ideas?

Thanks!

分享到QQ

分享到微博

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

发布评论

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

悲歌长辞 2025-01-01 17:33:05

你是对的，它不会缩放。在 Nexus S 上使用默认浏览器进行了测试。

Safari 为这个标签定义了非常愚蠢的默认值（宽度正好是 960 像素，正好适合不再生产的旧 iPhone）。因此，您需要明确指定最小规模。通过指定所有三个缩放参数（而不是 3 个中的 2 个），您的页面可以正常缩放：

<meta name="viewport" content="
user-scalable=yes;
width=device-width;
initial-scale=0.31; maximum-scale=1.0; minimum-scale=0.25"/>

在尝试缩放之前，还要等待整个页面完全加载。

请注意，这将是一个更强大的 Stack Exchange 问题，带有完整的最小示例，并且没有指向特定网站的垃圾链接。问题和答案的适用性越广泛越好！

You are right, it does not zoom. Tested on a Nexus S with the default browser.

Safari defined really stupid defaults for this tag (exactly 960 pixels for width, exactly for an old iPhone no longer made). Thus you'll want to explicitly specify minimum-scale. By specifying all three scale parameters (rather than 2 of the 3) your page zooms fine:

<meta name="viewport" content="
user-scalable=yes;
width=device-width;
initial-scale=0.31; maximum-scale=1.0; minimum-scale=0.25"/>

Also wait for the entire page to fully load before trying to zoom.

Note this would be a MUCH stronger Stack Exchange question with a complete minimal example, and no spammy link to a particular website. The broader the applicability of the question and the answer, the better!

回复收藏 0 原文

~没有更多了~