我怎样才能“禁用”;放大移动网页?

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

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

520644 次浏览
小开

这应该是你需要的一切:

<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
小开

你可以使用:

<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" />
小开

对于那些晚到派对的人，kgutteridge的答案对我来说不适用，Benny Neugebauer的答案包括目标密度dpi (a 已弃用的特性)。

然而，这对我来说是有效的:

<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" />
小开

移动浏览器(大多数)要求输入的字体大小为16px。

由于初始问题仍然没有解决方案，这里有一个纯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;
}
}
小开

你可以通过简单地将以下“元”元素添加到你的“头脑”中来完成任务:

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

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

小开

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

<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 App capable”:

    <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栏以及共享选项是禁用的。(你仍然可以左右滑动)然而，这种方法可以实现相当的应用程序的用户体验。全屏浏览器只有在网站从主屏幕加载时才会启动。我在根文件夹中加入了apple-touch-icon-180x180.png文件后，它才开始工作。

作为奖励，你可能还想包括这个的一个变体:

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
小开

似乎仅仅在index.html中添加元标签并不能阻止页面缩放。添加下面的样式会有神奇的效果。

:root {
touch-action: pan-x pan-y;
height: 100%
}
< p >编辑: 演示:https://no-mobile-zoom.stackblitz.io < / p >
小开 
<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

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

小开 
document.addEventListener('dblclick', (event) => {
event.preventDefault()
}, { passive: false });
小开

使用__abc0标记的解决方案不适合我(在Chrome win10和safari IOS 14.3上测试)，我也相信关于可访问性的担忧，正如杰克和其他人所提到的，应该受到尊重。

我的解决方案是只对被默认缩放破坏的元素禁用缩放。

我通过为缩放手势注册事件监听器并使用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元素上定义自定义缩放行为。

小开

使用这篇文章和其他一些文章，我设法将其整理出来，以便使用以下代码兼容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上，我的问题通过将__abc0交换为__abc1来解决，以及其他提到的事情。

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

纯"user-scalable=no"就足够了，排除其他宽度和比例参数对你的情况应该是好的。在我的情况下，我只是简单地在我的。在iOS 16上测试。


提交答案