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

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


当前回答

移动浏览器(大多数)要求输入的字体大小为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>

对于那些晚到派对的人来说,kgutteridge的答案对我来说不适用,Benny Neugebauer的答案包括目标密度(一个被弃用的功能)。

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

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

你可以使用:

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

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">