it-swarm.asia

如何在移动网页上“禁用”缩放?

我正在创建一个移动网页,它基本上是一个包含多个文本输入的大表单。

但是(至少在我的Android手机上),每次点击某些输入时,整个页面都会缩放,遮挡页面的其余部分。是否有一些HTML或CSS命令可以在moble网页上禁用这种缩放?

280
Martín Fixman

这应该是你需要的一切

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
392
kgutteridge

对于那些迟到的人来说,kgutteridge的答案对我不起作用,Benny Neugebauer的答案包括target-densitydpi(一个 被弃用的功能 )。

但这对我有用:

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

这里有很多方法 - 虽然位置是 通常不应限制用户 当涉及缩放以实现可访问性目的时,可能会发生以下情况:

在设备宽度处渲染页面,不要缩放:

<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" />
48
SW4

您可以使用:

<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" />
39
Benny Neugebauer

由于最初的问题仍然没有解决方案,这里是我的纯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;
  }
}
13
Azamat Rasulov

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

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


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

您只需将以下'meta'元素添加到“head”中即可完成任务:

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

添加“width”,“initial-scale”,“maximum-width”,“maximum-scale”等所有属性可能不起作用。因此,只需添加上述元素即可。

1
Kasumi Gunasekara