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

我正在创建一个移动网页，基本上是一个大型表单，其中包含多个文本输入。

但是（至少在我的Android手机上），每次单击某些输入时，整个页面都会在此处放大，从而使页面模糊页面的其余部分。是否存在一些HTML或CSS命令来禁用这种缩放网页？

正如Greg所说，如果我进入禁用缩放功能的移动网站，通常我要做的第一件事就是点击“后退”按钮（除非这是我真正必须查看的内容），而且我确定我不是唯一的一个。而且，以我的经验来看，大多数禁用缩放的网站也使用小字体，因此使阅读文本变得非常困难和不舒服。

我同意不应在大多数网站上将其禁用，但是在某些用例中，您可能需要禁用默认缩放功能-例如在移动网络游戏中，您可能需要覆盖缩放功能以进行其他操作。

您不需要-如果用户要缩放，那就让他们这样做。此外：Chrome浏览器可以忽略您的请求。

对于Android Firefox用户，有“始终缩放Firefox”加载项。强烈推荐。

我为画布项目禁用缩放。缩放可能会使动画背后的算法混乱。我同意，开发人员必须在禁用缩放功能之前考虑可用性。相应地调整字体大小和页面结构。 vmin CSS度量单位在这里很有帮助。我还建议使用百分比以及vh和vw。

#1 楼

这应该是您需要的一切：

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

这也将禁用用户的总体缩放功能，以及浏览器的自动调整页面适合视口的方式的能力-马丁一直在寻找的是一种禁用“输入时放大”的方法行为。

– Matt Lohkamp
2011-3-29在19:49

现在，Posterous的某人做到了这一点，而该字体的字体为12px，因此它不可读，我无法找到解决方法。

–埃米尔·伊万诺夫（Emil Ivanov）
2011年12月1日7:05

每个视力障碍的人，包括我自己，都比任何人都更讨厌这个。我必须截取执行此操作的页面的屏幕抓取，然后在图片查看器中放大它们。

–杰克·马尔凯蒂（Jack Marchetti）
13年11月21日在2:10

第二个meta标签有什么作用？在第一个meta标签中不是width = device-width吗？

–卢克
2014年1月15日，3：13

这似乎在iOS 7上不起作用。请参阅lukad03答案

– david
2014年5月8日19:09

#2 楼

对于参加晚会的人来说，kgutteridge的答案对我不起作用，Benny Neugebauer的答案包括target-densitydpi（已弃用的功能）。 br />

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

现在，这是正确的答案。其他答案不再起作用（至少适用于iOS 7）。

–凯尔·法里斯（KyleFarris）
2014年3月17日20:28

有人在iOS 10.x上尝试过此操作，但我认为它不起作用吗？

– JMac
17年4月13日在2:06

对我不起作用。它使用滚动条和不良的缩放来调整整个屏幕的大小。

–Cocorico
17-12-5 '13：16

由于Apple的SFB问题，仍无法在Safari / iOS 11上运行。

– 15ee8f99-57ff-4f92-890c-b56153
18年3月21日在15:27

从字面上看，这两个答案没有区别。

– ShanerM13
20年8月29日在21:14

#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
15年9月18日在22:45

@ Le'nton禁用整个页面的缩放不是处理输入焦点上的放大的好方法。至少在iOS上，可以通过增加输入的字体大小来禁用输入焦点缩放。

– pfg
20-2-7在22:55

#4 楼

您可以使用：

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

，但是请注意，在Android 4.4中，不再支持target-densitydpi属性。因此，对于Android 4.4及更高版本，建议将以下做法作为最佳做法：

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

这对我不起作用。我的网站在FF上仍可在android上缩放。

–亨里克
20年6月26日在9:55

#5 楼

由于仍然没有解决最初问题的方法，因此这是我纯CSS的2美分。

移动浏览器（大多数）要求输入中的字体大小为16px。所以

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

解决了该问题。因此，您无需禁用网站的缩放和宽松的可访问性功能。

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

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

为什么此解决方案的选票很少？到目前为止，这是避免窗体单击缩放的最佳方法。

– KlausCPH
18年4月27日在19:36

是;这也解决了我的问题！我不想完全禁用缩放功能，而这正是我所需要的。

–布伦丹
18年7月17日在19:45

您还可以设置整个页面的font-size：1rem，这样字体可以很好地缩放，同时避免出现“聚焦时缩放”问题。

– itachi
20 May 27 '15：22

#6 楼

似乎仅将meta标签添加到index.html并不会阻止页面缩放。添加以下样式将起到神奇作用。

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

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

这应该被接受修复，也可以在移动Safari ios13 atm上工作

–魔术师
20 Mar 20 '20在15:56

可以正常使用移动设备，谢谢！在这里检查proyecto26.com/animatable-component

– jdnichollsc
20年4月28日在6:28

我必须使用html作为选择器。：root对我来说在iOS 13上不起作用，但是html可以。 PS，编辑：演示链接不再起作用。

– Namklabs
20年7月31日在21:43

哇，效果很好。感谢您发布此信息。

–user1170117
20-10-11的16:57

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

不应将触摸操作设置为无-developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action#Values

–rahulroy9202
18年11月21日在8:47

对我来说@ rahulroy9202触摸操作：操纵；工作正常。触摸动作：无；什么也没做

– Umair
19年7月26日在22:03

#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 楼

您只需在“ head”中添加以下“ meta”元素即可完成任务：

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

添加所有属性，例如“ width”，“ initial-scale” '，'最大宽度'，'最大比例'可能不起作用。因此，只需添加以上元素。

#10 楼

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

请添加脚本以禁用捏，轻按，聚焦缩放

#11 楼

使用meta -tag的解决方案对我不起作用（在Chrome win10和Safari IOS 14.3上进行了测试），我还相信应该尊重Jack和其他人提到的关于可访问性的问题。
我的解决方案是仅对默认缩放损坏的元素禁用缩放。
我通过为缩放手势注册事件侦听器并使用event.preventDefault()来抑制浏览器的默认缩放行为来做到这一点。
完成多个事件（触摸手势，鼠标滚轮和按键）。以下代码段是触摸板上的鼠标滚轮和捏合手势的示例：

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 楼

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

请详细说明您的答案。我们自称是参考书，即应说明解决方案。

–max
20年11月1日在10:27

通过双击页面的同一点即可放大网页。如果您阻止默认双击，则将阻止缩放。此方法可在ios上使用（Android也必须经过测试，尚未经过测试）。

–Руслан
20年11月3日，17：00

编程黑洞网