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

Question

我已经使用viewport的meta标签多年，就像苹果在他们自己的开发者页面上所说的那样，在我的响应式设计中。最近，即使按照以下方式设置，我的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这样的其他网站上，它也可以缩放。我想这是因为HTML5于12月发布时禁止在元标记中使用maximum-scale属性的变化，但我不能确定。我一直在使用noBounce.js来禁用所有iOS弹跳和缩放功能，但我不确定哪一部分控制缩放并且我现在大多数应用程序都不再使用noBounce.js因为其他原因。

- Kaboom

Answer 1

iOS 10起，移动Safari浏览器将忽略user-scalable=no并允许在每个网站上进行缩放和放大，以提高可访问性。

iOS 10更新日志中提到：

为了提高Safari浏览器上网站的可访问性，即使网站在视口中设置了user-scalable=no，用户现在也可以通过捏合手势进行缩放。

看来我们将不得不开始考虑使用捏合手势设计网站，至少对于苹果设备而言。

- Marc

---

苹果这个决定看起来很糟糕，因为大多数情况下网站已经设计成适用于移动设备。我不确定该如何处理将页面缩放到200％，因为它不会在调整大小时重新调整大小，而是浏览器只是放大内容而不改变显示。 - Kaboom

Answer 2

我遇到了iOS10上的Pinch-to-Zoom问题，我可以通过在head标签中对PortableWebApp（Cordova）进行操作来解决此问题。

我所做的就是在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 不受此解决方法的影响。

- kaya