我正在创建一个移动网页，它基本上是一个带有多个文本输入的大表单。
但是（至少在我的 Android 手机上），每次我点击某个输入时，整个页面都会放大，遮盖页面的其余部分。是否有一些 HTML 或 CSS 命令可以在移动网页上禁用这种缩放？
这应该是您需要的一切：
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
对于那些迟到的人来说，kgutteridge 的答案对我不起作用，而 Benny Neugebauer 的答案包括目标密度dpi（一个正在被弃用的功能）。
但这对我有用：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.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" />
似乎仅向index.html 添加元标记并不能阻止页面缩放。添加下面的样式将会产生神奇的效果。
:root {
touch-action: pan-x pan-y;
height: 100%
}
移动浏览器（大多数）要求输入中的字体大小为 16 像素。
由于最初的问题仍然没有解决方案，这里有一个纯 CSS 解决方案。
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;
}
}
您可以使用：
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
...
</head>
但请注意，在 Android 4.4 中，不再支持属性 target-密度dpi 。因此，对于 Android 4.4 及更高版本，建议将以下内容作为最佳实践：
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
请尝试添加此元标记和样式
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
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>
请添加脚本以禁用捏合、点击、聚焦缩放
<header>
<meta name="viewport" content="user-scalable=no">
</header>
纯
"user-scalable=no"您只需将以下“元”元素添加到“头”中即可完成任务：
<meta name="viewport" content="user-scalable=no">
添加“宽度”、“初始比例”、“最大宽度”、“最大比例”等所有属性可能不起作用。因此，只需添加上述元素即可。
使用
meta我的解决方案是仅对因默认缩放而损坏的元素禁用缩放。
我通过注册缩放手势的事件监听器并使用
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
我用它来保持应用程序大部分部分的标准缩放行为，并在画布元素上定义自定义缩放行为。
使用这篇文章和其他一些文章，我设法解决了这个问题，以便使用以下代码与 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>document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });