我正在创建一个移动网页，基本上是一个大型表单，带有多个文本输入。
但是（至少在我的Android手机上），每次我单击某些输入时，整个页面都会在此处放大，从而遮盖了页面的其余部分。是否有一些HTML或CSS命令来禁用这种缩放网页？
如何“禁用”移动网页的缩放？
第2803篇《如何“禁用”移动网页的缩放？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共7个回答
似乎仅将meta标签添加到index.html并不会阻止页面缩放。添加以下样式将起到神奇作用。
:root {
touch-action: pan-x pan-y;
height: 100%
}
编辑：演示：https : //no-mobile-zoom.stackblitz.io
您可以使用：
<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" />
这里有许多方法-尽管位置通常是为了可访问性而缩放时不应该限制用户，但是可能会发生一些需要的地方：
以设备的宽度渲染页面，不缩放：
<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" />
请尝试添加此元标记和样式
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
由于仍然没有解决最初问题的方法，因此这是我的纯CSS两分钱。
移动浏览器（大多数）要求输入中的字体大小为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;
}
}相似问题
问题类别
您只需在“ head”中添加以下“ meta”元素即可完成任务：
添加所有属性，例如“宽度”，“初始比例”，“最大宽度”，“最大比例”可能不起作用。因此，只需添加以上元素。