如何禁用移动Safari上的视口缩放?

这三种方法我都试过了，但都无济于事:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

每个是不同的值，我发现谷歌搜索或SO搜索推荐，但没有一个'user-scalable=X'值似乎是工作的

我还尝试用逗号来分隔值，而不是分号，运气不好。然后我尝试只呈现用户可扩展的价值，但仍然没有成功。

更新

从苹果的网站上得到了这个，它是有效的:

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

事实证明，问题是不标准的引号，因为我从一个网站复制了元标签，正在使用他们，哎呀

当前回答

对于寻找iOS 10解决方案的人来说，在iOS 10的Safari中，user-scaleable=no是禁用的。原因是苹果正试图通过允许人们放大网页来提高可访问性。

来自发行说明:

为了提高Safari网站的可访问性，用户现在可以中设置了user-scalable=no时，也可以缩放视窗。

所以据我所知，我们运气不好。

2016-08-09 13:32:41

其他回答

我在iOS 12中使用以下代码:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

使用第一个if语句，我确保它只会在iOS环境中执行(如果它在Android中执行，滚动行为将被破坏)。另外，请注意被动式选项设置为false。

2019-08-22 10:21:56

我尝试了以上所有方法，但这在IOS设备上很管用:

<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0, user-scalable=0">

2022-11-10 13:57:49

@mattis是正确的，iOS 10 Safari不允许你禁用用户缩放属性的缩放。但是，我在'gesturestart'事件上使用preventDefault禁用了它。我只在iOS 10.0.2的Safari上验证了这一点。

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

2016-09-26 20:36:31

如上所述，这个解决方案在2020年底基本有效:

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

但缺点是，当你在滚动时，你仍然可以捏它，然后它就卡住了。解决方案是禁用滚动。

body {
    overflow: hidden;
}

但是，如果您仍然希望滚动页面呢? 您仍然可以使用另一个<div>设置为overflow:auto:

<body>
    <div id='app'></div>
</div>

然后

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

2020-10-29 06:25:30

这个应该可以在iphone上运行。

<meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

2017-07-09 10:59:34

如何禁用移动Safari上的视口缩放?

推荐文章

最新文章

标签