我正在创建一个移动网页，它基本上是一个带有多个文本输入的大表单。
但是（至少在我的 Android 手机上），每次我点击某个输入时，整个页面都会缩放到那里，从而遮盖了页面的其余部分。是否有一些 HTML 或 CSS 命令可以在移动网页上禁用这种缩放？
user-scalable=no 被忽略。请参阅this
vmin CSS 度量单位在这里很有帮助。我还建议使用百分比和 vh 和 vw。
这应该是您需要的一切：
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
对于那些迟到的人，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" />
user-scalable=0 而不是 user-scalable=no。我不确定它有什么不同。
这里有许多方法 - 尽管位置是通常不应该限制用户在为可访问性目的进行缩放时，但可能存在需要它的情况：
以设备的宽度渲染页面，不要缩放：
<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" />
when developing web apps for mobile you often have to deal with the "zom-in on input focus" 这不是要处理的问题，但应用程序应设计为与此功能一起使用。此类功能专为改善用户体验 (UX) 而设计，并基于帮助用户的最佳实践。
移动浏览器（大多数）要求输入中的字体大小为 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，这样字体可以很好地缩放，同时避免“聚焦缩放”问题。
您可以使用：
<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" />
似乎只是将元标记添加到 index.html 并不能阻止页面缩放。添加以下样式将起到神奇的作用。
:root {
touch-action: pan-x pan-y;
height: 100%
}
编辑：演示：https://no-mobile-zoom.stackblitz.io
请尝试添加此元标记和样式
<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: manipulation; 工作正常。 touch-action: none; 什么都没做
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">
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>
请添加脚本以禁用捏合、点击、聚焦缩放
您只需将以下“元”元素添加到“头”中即可完成任务：
<meta name="viewport" content="user-scalable=no">
添加所有属性，如 'width'、'initial-scale'、'maximum-width'、'maximum-scale' 可能不起作用。因此，只需添加上述元素。
使用这篇文章和其他一些文章，我设法解决了这个问题，以便使用以下代码与 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" />';
}
?>
这可能对某人有所帮助：在 iOS 上，通过将 <button> 替换为 <div> 以及提到的其他内容，我的问题得到了解决。
使用 meta-tag 的解决方案对我不起作用（在 Chrome win10 和 safari IOS 14.3 上测试），我也相信 Jack 和其他人提到的关于可访问性的担忧应该得到尊重。
我的解决方案是仅对被默认缩放损坏的元素禁用缩放。
我通过为缩放手势注册事件侦听器并使用 event.preventDefault() 来抑制浏览器默认缩放行为来做到这一点。
这需要通过几个事件（触摸手势、鼠标滚轮和按键）来完成。以下代码段是触摸板上鼠标滚轮和捏合手势的示例：
noteSheetCanvas.addEventListener("wheel", e => {
// suppress browsers default zoom-behavior:
e.preventDefault();
// execution of my own custom zooming-behavior:
if (e.deltaY > 0) {
this._zoom(1);
} else {
this._zoom(-1);
}
});
此处描述了如何检测触摸手势：https://stackoverflow.com/a/11183333/1134856
我使用它来为我的应用程序的大部分部分保持标准缩放行为，并在画布元素上定义自定义缩放行为。
document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });
width=device-width不是已经在第一个元标记中了吗？