iOS Pinch Zoom - 现在无法使用视口禁用

时间:2017-02-13 17:12:18

标签: javascript jquery html ios css

我一直在使用视频的元标记,就像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不允许最大化的变化的一部分meta标签中的-scale属性,但我无法确定。到目前为止,我一直在使用noBounce.js禁用了所有的iOS弹跳和缩放功能,但我不确定哪个部分控制缩放以便从中删除它并且我不再在大多数应用程序上使用noBounce出于其他原因。

2 个答案:

答案 0 :(得分:0)

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

从iOS 10更改日志:

  

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

看起来我们必须开始设计具有捏合和缩放的网站,至少对于Apple设备而言。

答案 1 :(得分:0)

我提出了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不受此解决方法的影响。