如何“禁用”移动网页的缩放？答案

【问题标题】：How can I "disable" zoom on a mobile web page?如何“禁用”移动网页的缩放？
【发布时间】：2011-05-27 06:02:32
【问题描述】：

我正在创建一个移动网页，它基本上是一个带有多个文本输入的大表单。

但是（至少在我的 Android 手机上），每次我点击某个输入时，整个页面都会放大到那里，从而遮挡页面的其余部分。是否有一些 HTML 或 CSS 命令可以在移动网页上禁用这种缩放？

【问题讨论】：

我同意大多数网站不应该禁用它，但是在某些用例中您可能希望禁用默认缩放 - 例如您可能希望覆盖缩放到的移动网页游戏做点别的。
对于 Android Firefox 用户，有 Always Zoom for Firefox 附加组件。强烈推荐。
从 iOS 10 中，user-scalable=no 被忽略。见this
我正在禁用画布项目的缩放。缩放可能会弄乱动画背后的算法。我同意，开发人员必须在禁用缩放之前考虑可用性。相应地调整字体大小和页面结构。 vmin CSS 测量单位在这里很有帮助。我还建议使用百分比和vh 和vw。
我们为我们的信息亭桌面应用程序使用铬浏览器控件。如果用户可以进行捏缩放，它会给我们带来很多麻烦。不幸的是，下面的解决方案对我不起作用，现在我正在尝试使用 --disable-pinch 命令。

【解决方案1】：

这应该是你需要的一切：

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

【讨论】：

这也禁用了用户的一般缩放功能，以及浏览器自动调整页面适合视口的方式的能力 - Martin 所寻找的只是一种禁用 '放大输入点击”的行为。
现在 Posterous 的某个人就是这样做的，而字体为 12 像素，因此不可读，我找不到解决方法。
每个视力障碍者，包括我自己，都比什么都讨厌这个。我必须对执行此操作的页面进行屏幕抓取，然后在图片查看器中放大它们。
第二个元标记有什么作用？ width=device-width 不是已经在第一个元标记中了吗？
这似乎不适用于 iOS 7。请参阅 lukad03 答案

【解决方案2】：

对于那些迟到聚会的人，kgutteridge 的回答对我不起作用，Benny Neugebauer 的回答包括 target-densitydpi (a feature that is being deprecated)。

这对我有用：

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

【讨论】：

这是正确的答案。其他答案不再有效（至少对于 iOS 7）。
有人在 iOS 10.x 上试过这个，我认为它不起作用？
由于 Apple 的 SFB 问题，仍然无法在 Safari/iOS 11 上运行。
这两个答案从字面上看没有区别。
有一点不同——kgutteridge 的答案是user-scalable=0 而不是user-scalable=no。我不确定它有什么不同。

【解决方案3】：

这里有多种方法 - 尽管位置是通常不应限制用户，当涉及到可访问性目的的缩放时，可能会发生一些情况它在哪里需要：

以设备宽度呈现页面，不要缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

防止缩放 - 并阻止用户缩放：

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

移除所有缩放、所有缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

【讨论】：

“通常不应该限制用户”，但是在为移动设备开发 Web 应用程序时，您通常必须处理“放大输入焦点”。我发现在这种情况下禁用缩放很有帮助。
@Le'nton 禁用缩放整个页面并不是处理输入焦点放大的好方法。至少在 iOS 上，可以通过增加输入的字体大小来禁用输入焦点缩放。
when developing web apps for mobile you often have to deal with the "zom-in on input focus" 这不是要处理的事情，但应用程序应该设计为与此功能一起使用。此类功能专为改善用户体验 (UX) 而设计，并基于帮助用户的最佳实践。

【解决方案4】：

移动浏览器（大部分）要求输入的字体大小为 16 像素。

由于初始问题仍然没有解决方案，这里有一个纯 CSS 解决方案。

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

解决了这个问题。因此，您无需禁用网站的缩放和松散的辅助功能。

如果您的基本字体大小在手机上不是 16 像素或不是 16 像素，您可以使用媒体查询。

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

【讨论】：

为什么这个解决方案的票数这么少？这是迄今为止避免表单点击缩放的最佳方式。
是的；这也解决了我的问题！我不想完全禁用缩放，这正是我所需要的。
您也可以为整个页面设置font-size: 1rem，这样字体可以很好地缩放，同时避免“focus-on-zoom”问题。

【解决方案5】：

你可以使用：

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

但请注意，对于 Android 4.4，属性 target-densitydpi is no longer supported。因此，对于 Android 4.4 及更高版本，建议采用以下最佳做法：

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

【讨论】：

这对我不起作用。我的网站在 FF 上仍然可以在 android 上扩展。

【解决方案6】：

似乎只是将元标记添加到 index.html 并不能阻止页面缩放。添加以下样式将起到神奇的作用。

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

编辑：演示：https://no-mobile-zoom.stackblitz.io

【讨论】：

这应该被接受修复，也适用于移动 safari ios13 atm
它在手机上按预期工作，谢谢！在这里查看proyecto26.com/animatable-component
我不得不使用 html 作为我的选择器。 :root 对我来说不适用于 iOS 13，但 html 可以。 PS，编辑：演示链接不再起作用。
哇这个效果很好。感谢您发布此内容。
最佳解决方案，非常适合我...在移动媒体查询中使用 CSS 中的 HTML 标签

【解决方案7】：

请尝试添加此元标记和样式

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


<style>
body{
        touch-action: manipulation;
    }
</style>

【讨论】：

不应将touch-action 设置为none - developer.mozilla.org/en-US/docs/Web/CSS/touch-action#Values
@rahulroy9202 对我来说touch-action: manipulation; 工作正常。 touch-action: none;什么都没做

【解决方案8】：

Web 应用程序的可能解决方案：虽然在 iOS Safari 中不能再禁用缩放， 从主屏幕快捷方式打开网站时，它将被禁用。

添加这些元标记以将您的应用声明为“支持 Web 应用”：

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" >
    <meta name="apple-mobile-web-app-capable" content="yes" >

但是仅在您的应用程序是自我维持的情况下使用此功能，因为前进/后退按钮和 URL 栏以及共享选项被禁用。（尽管您仍然可以左右滑动）但是这种方法可以启用像 ux 这样的应用程序。全屏浏览器仅在从主屏幕加载站点时启动。 ~~我也只是在我的根文件夹中包含了一个 apple-touch-icon-180x180.png 之后才让它工作。~~

作为奖励，您可能还想包含这个的变体：

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

【讨论】：

【解决方案9】：

您只需将以下“元”元素添加到您的“头”中即可完成任务：

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

添加所有属性，如 'width'、'initial-scale'、'maximum-width'、'maximum-scale' 可能不起作用。因此，只需添加上述元素即可。

【讨论】：

【解决方案10】：

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

请添加脚本以禁用捏合、点击、聚焦缩放

【讨论】：

这是唯一适用于 iPad 的解决方案。谢谢！

【解决方案11】：

使用meta-tag 的解决方案对我不起作用（在 Chrome win10 和 safari IOS 14.3 上测试），我也相信 Jack 和其他人提到的关于可访问性的担忧应该得到尊重。

我的解决方案是仅对被默认缩放损坏的元素禁用缩放。

我通过为缩放手势注册事件侦听器并使用event.preventDefault() 来抑制浏览器默认缩放行为来做到这一点。

这需要通过几个事件（触摸手势、鼠标滚轮和按键）来完成。以下 sn-p 是触摸板上鼠标滚轮和捏合手势的示例：

noteSheetCanvas.addEventListener("wheel", e => {
        // suppress browsers default zoom-behavior:
        e.preventDefault();

        // execution my own custom zooming-behavior:
        if (e.deltaY > 0) {
            this._zoom(1);
        } else {
            this._zoom(-1);
        }
    });

这里描述了如何检测触摸手势：https://stackoverflow.com/a/11183333/1134856

我使用它来为我的应用程序的大部分部分保持标准缩放行为，并在画布元素上定义自定义缩放行为。

【讨论】：

【解决方案12】：

使用这篇文章和其他一些文章，我设法解决了这个问题，以便使用以下代码与 Android 和 iPhone/iPad/iPod 兼容。这适用于 PHP，您可以对任何其他语言使用相同的概念进行字符串搜索。

<?php //Device specific headers
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

if($iPhone || $iPod || $iPad){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}

?>

【讨论】：

【解决方案13】：

这可能对某人有所帮助：在 iOS 上，我的问题已通过将 <button>s 替换为 <div>s 以及提到的其他内容得到解决。

【讨论】：

【解决方案14】：

document.addEventListener('dblclick', (event) => {
    event.preventDefault()
}, { passive: false });

【讨论】：

请详细说明您的答案。我们声称是一本参考书，即应该解释解决方案。
在网页的同一点上双击放大网页。如果您阻止默认双击，您将阻止缩放。此方法适用于ios（android也必须，尚未测试）。