html - 如何在 Mobile Safari 上禁用视口缩放？

Question

我已经尝试了所有这三个都无济于事：

<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 ”值似乎都不起作用

我还尝试用逗号而不是分号来分隔值，但运气不好。然后我尝试只user-scalable存在价值，仍然没有运气。

更新

从 Apple 的网站上得到了这个，它可以工作：

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

事实证明，问题出在非标准引号，因为我从使用它们的网站复制了元标记，哎呀

score 789 · Accepted Answer

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

这适用于 iOS 4.2 中的 Mobile Safari。

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

score 187 · Accepted Answer

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

从发行说明：

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

据我了解，我们真倒霉。

score 111 · Accepted Answer

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

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

score 60 · Accepted Answer

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

要禁用捏缩放手势并双击缩放：

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

如果您的应用也不需要平移，即滚动，请使用：

body {
  touch-action: none;
}

score 17 · Accepted Answer

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

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

score 16 · Accepted Answer

我使用以下代码在 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。

score 10 · Accepted Answer

user-scalable=0

这不再适用于 iOS 10。Apple 删除了该功能。

现在你无法在 iOS 上禁用缩放网站，除非你制作了粗糙的平台应用程序。

score 9 · Accepted Answer

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

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

score 8 · Accepted Answer

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

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

以及 CSS 样式表的以下规则

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

score 7 · Accepted Answer

尝试将以下内容添加到您的 head-tag 中：

<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
}

score 5 · Accepted Answer

这在 IOS 10.3.2 中运行良好

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

谢谢@arthur 和@aleclarson

score 4 · Accepted Answer

有时，content标签中的那些其他指令可能会混淆 Apple 关于如何布局页面的最佳猜测/启发式方法，您只需要禁用捏缩放即可。

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

score 3 · Accepted Answer

在 Safari 9.0 及更高版本中，您可以在视口元标记中使用缩小以适应，如下所示

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

score 0 · Accepted Answer

如前所述，该解决方案基本上在 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;
 }

score -1 · Accepted Answer

我愚蠢地有一个以像素为单位的宽度的包装器 div。其他浏览器似乎足够智能来处理这个问题。一旦我将宽度转换为百分比值，它在 Safari 移动设备上也能正常工作。很烦人。

.page{width: 960px;}

到

.page{width:93.75%}

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

score -2 · Accepted Answer

为了遵守 WAI WCAG 2.0 AA 可访问性要求，您绝不能禁用捏缩放。（WCAG 2.0：SC 1.4.4 调整文本级别 AA）。您可以在此处阅读更多相关信息： Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification

score -5 · Accepted Answer

这个应该在iphone等上工作。

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

html - 如何在 Mobile Safari 上禁用视口缩放？

17 回答 17

Related

Reference