我正在创建一个移动网页,基本上是一个大的形式与几个文本输入。

然而(至少在我的Android手机上),每次我点击一些输入,整个页面都会放大到那里,掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?


当前回答

使用元标签的解决方案对我来说并不管用(在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元素上定义自定义缩放行为。

其他回答

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

纯“user-scalable=no”就足够了,排除其他宽度和缩放参数就可以了。在我的情况下,我只是简单地在我的。在iOS 16上测试。

这里有许多方法-尽管立场是,当涉及到缩放的可访问性目的时,通常不应该限制用户,但可能会出现需要缩放的情况:

以设备的宽度渲染页面,不要缩放:

<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 name="viewport" content="user-scalable=no">

添加所有属性,如'width','initial-scale', 'maximum-width', 'maximum-scale'可能不起作用。因此,只需添加上面的元素。

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

请添加脚本以禁用捏,点击,聚焦缩放

请尝试添加此元标签和样式

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


<style>
body{
        touch-action: manipulation;
    }
</style>