我正在创建一个移动网页，基本上是一个大的形式与几个文本输入。
然而(至少在我的Android手机上)，每次我点击一些输入，整个页面都会放大到那里，掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?
当前回答
这可能会对某些人有所帮助:在iOS上，我的问题通过将<button>s交换为<div>s以及其他提到的事情来解决。
其他回答
这应该是你需要的一切:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
使用元标签的解决方案对我来说并不管用(在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
我使用它来保持应用程序大部分部分的标准缩放行为，并在canvas元素上定义自定义缩放行为。
你可以使用:
<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 content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<style>
body{
touch-action: manipulation;
}
</style>
document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });
