我正在创建一个移动网页,它基本上是一个包含多个文本输入的大表单.
但是(至少在我的Android手机上),每次点击某些输入时,整个页面都会缩放,遮挡页面的其余部分.是否有一些HTML或CSS命令可以在moble网页上禁用这种缩放？
kgu*_*dge 417
这应该是你需要的一切
<meta
name='viewport'
content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
/>
Luk*_*ler 152
对于那些迟到的人来说,kgutteridge的答案对我不起作用,Benny Neugebauer的答案包括target-densitydpi(一个被弃用的功能).
但这对我有用:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
SW4*_*SW4 50
这里有许多方法 - 虽然位置通常是用户在进行可访问性缩放时不应受到限制,但可能会出现以下情况:
在设备的宽度处渲染页面,不要缩放:
<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" />
Ben*_*uer 39
您可以使用:
<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" />
Api*_*Api 35
似乎只是向 index.html 添加元标记并不能阻止页面缩放。添加以下样式将发挥魔力。
:root {
touch-action: pan-x pan-y;
height: 100%
}
编辑：演示：https : //no-mobile-zoom.stackblitz.io
Aza*_*lov 23
由于最初的问题仍然没有解决方案,这里是我的纯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;
}
}小智 10
<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>
Web 应用程序的可能解决方案：虽然无法再在 iOS Safari 中禁用缩放，但从主屏幕快捷方式打开站点时， 它将被禁用。
添加这些元标记以将您的应用程序声明为“支持 Web 应用程序”：
<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 栏以及共享选项被禁用。（虽然你仍然可以左右滑动）但是这种方法可以启用类似 ux 的应用程序。全屏浏览器仅在从主屏幕加载站点时启动。我也只有在我的根文件夹中包含一个 apple-touch-icon-180x180.png 后才能让它工作。
作为奖励，您可能还想包含它的一个变体：
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
小智 5
<header>
<meta name="viewport" content="user-scalable=no">
</header>
pure"user-scalable=no"就足够了，排除其他宽度和比例参数应该适合您的情况。就我而言，我只是简单地将代码片段添加到我的 . 在 iOS 16 上测试。
| 归档时间： |
|
| 查看次数： |
346137 次 |
| 最近记录： |