我正在创建一个移动网页，基本上是一个大的形式与几个文本输入。
然而(至少在我的Android手机上)，每次我点击一些输入，整个页面都会放大到那里，掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?
当前回答
这里有许多方法-尽管立场是，当涉及到缩放的可访问性目的时，通常不应该限制用户，但可能会出现需要缩放的情况:
以设备的宽度渲染页面，不要缩放:
<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" />
其他回答
使用这篇文章和其他一些文章，我设法将其整理出来，以便使用以下代码兼容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" />';
}
?>
移动浏览器(大多数)要求输入的字体大小为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="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" />
使用元标签的解决方案对我来说并不管用(在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元素上定义自定义缩放行为。
你可以通过简单地将以下“元”元素添加到你的“头脑”中来完成任务:
<meta name="viewport" content="user-scalable=no">
添加所有属性，如'width'，'initial-scale'， 'maximum-width'， 'maximum-scale'可能不起作用。因此，只需添加上面的元素。
