iOS 捏缩放 - 现在无法通过视口禁用

Posted 2023-02-25

【中文标题】iOS 捏缩放 - 现在无法通过视口禁用

【英文标题】：iOS Pinch Zoom - Can't disable with viewport now

【发布时间】：2017-02-13 17:12:17

【问题描述】：

我一直在使用视口的元标记，就像 Apple 在他们自己的开发者页面上所说的那样，现在我的响应式设计已经有好几年了。截至最近，我的 iPhone 现在可以放大，即使是以下内容

<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />
<meta name="HandheldFriendly" content="true" />

初始页面加载到正确的大小，但用户现在可以放大更近，并且视口无法正常工作。我想知道是否有一种方法可以禁用使用 jQuery 进行缩放？因为我已经在我的页面上使用了一些，所以很容易实现。

请注意：即使在其他网站上，例如 davidwalsh.name/demo/mobile-viewport.php 以前可以使用它现在也可以放大。我想这是 12 月发布的 html5 更改的一部分，它不允许最大比例元标记中的属性，但我不能确定。到目前为止，我一直在页面上使用 noBounce.js，它禁用了所有 ios 弹跳和缩放功能，但我不确定哪个部分控制缩放以窃取它，我不再在大多数应用程序上使用 noBounce其他原因。

【参考方案1】：

从 iOS 10 开始，移动 Safari 浏览器将忽略 user-scalable=no，并允许捏合和缩放每个网站以提高可访问性。

来自 iOS 10 更新日志：

为了改善 Safari 中网站的可访问性，即使网站在视口中设置了 user-scalable=no，用户现在也可以捏合缩放。

看起来我们必须在设计网站时考虑到捏合和缩放，至少对于 Apple 设备而言。

【讨论】：

对于苹果来说似乎是一个糟糕的决定，因为在大多数情况下，该网站已经为移动设备设计。不知道我将如何处理将页面缩放到 200%，因为它不会在调整大小时重新调整，而是浏览器只是放大内容而不改变显示。

【参考方案2】：

我遇到了 iOS10 Pinch-to-Zoom 问题，我可以通过在 PortableWebApp(Cordova) 的 head-tag 内进行操作来解决此问题。

我所做的只是在 app.js 的 init() 中添加这一行

$('head').append('<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />');

应用现在可以滚动，适应不同的屏幕尺寸/设备，不再需要捏合缩放。 注意：记住这仅适用于混合应用程序，Safari 不受此解决方法的影响。