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

小开

最佳答案

编辑:在iOS 10之后可能无法工作，请参阅下面基于touch-action的解决方案。

您的代码将属性双引号显示为花哨的双引号。如果花哨的引号出现在您的实际源代码中，我猜这就是问题所在。

这对我来说在iOS 4.2的Mobile Safari上是有效的。

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

小开

有时候，那些content标签中的其他指令可能会打乱苹果对如何布局页面的最佳猜测/启发，你只需要禁用缩放。

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

小开

试着在你的头标签上添加以下内容:

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

另外

<meta name="HandheldFriendly" content="true">

最后，无论是作为一个样式属性还是在你的css文件中，为基于webkit的浏览器添加以下文本:

html {
-webkit-text-size-adjust: none
}

小开

为了符合WAI WCAG 2.0 AA的可访问性要求，你必须没有禁用捏缩放。(WCAG 2.0: SC 1.4.4 Resize text Level AA)。你可以在这里阅读更多关于它:移动辅助:WCAG 2.0和其他W3C/WAI指南如何应用于移动，2.2缩放/放大

小开

在Safari 9.0及以上版本中，您可以在viewport元标记中使用shrink-to-fit，如下所示

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

小开

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

来自发行说明:

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

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

小开

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

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

小开

user-scalable=0

这在iOS 10上不再适用。苹果删除了这一功能。

没有办法你可以禁用缩放网站在iOS现在，除非你做gross平台应用。

小开

对于iphone safari到iOS 10“viewport”不是一个解决方案，我不喜欢这种方式，但我已经使用了这个javascript代码，它帮助了我

 document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);

小开

这在IOS 10.3.2中运行良好

    document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
}
}, false);

谢谢@arthur和@aleclarson

小开

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

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

小开

我愚蠢地设置了一个包装器div，其宽度以像素为单位。其他浏览器似乎足够聪明，可以处理这个问题。一旦我将宽度转换为百分比值，它在Safari手机上也能正常工作。很烦人。

.page{width: 960px;}

来

.page{width:93.75%}


<div id="divPage" class="page">
</div>

小开

我设法通过向HTML头添加以下内容来阻止这种行为。这适用于移动设备，因为桌面浏览器在使用鼠标滚轮时支持缩放。这在桌面浏览器上不是什么大问题，但考虑到这一点很重要。

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

and the following rule to the CSS stylesheet

html {
-webkit-text-size-adjust: none;
touch-action: manipulation;
}

小开

我在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中执行，滚动行为将被破坏)。另外，注意passive选项设置为false。

小开

使用CSS touch-action属性是最优雅的解决方案。在iOS 13.5和iOS 14上测试。

禁用缩放手势和双击缩放:

body {
touch-action: pan-x pan-y;
}

如果你的应用程序也不需要平移，即滚动，使用这个:

body {
touch-action: none;
}

小开

如上所述，这个解决方案在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;
}

小开

实际上苹果在最新的iOS版本上禁用了user-scalable=no。我尝试作为指导方针，这种方式可以工作:

body {
touch-action: pan-x pan-y;
}

小开

截至今天(2022年10月)，在iOS 14.8上，我可以完全防止双击缩放的唯一方法是:

document.addEventListener("click", (e) =>
{
e.preventDefault();
})

即使是这样的:

* {
touch-action: none !important;
}

(这显然是不现实的，但只是为了演示目的)在每种情况下都是不够的。事实证明，任何我处理过click的for元素，双击它将导致几乎不可逆的放大，完全忽略touch-action设置。但如果我在点击处理程序中调用preventDefault()，它就不会缩放。因此，到目前为止，在document级别上这样做似乎就足够了，这样我就不必每次处理click时都这样做。

我不知道这可能会有什么副作用，但我相信如果人们想到了什么，他们会插话的。

小开

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

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