首页 文章

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

提问于
浏览 次
258

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

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

html css mobile

8 回答

  • 143

    这应该是你需要的一切

    <meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>
    回复于
  • 45

    对于那些迟到的人来说，kgutteridge 's answer doesn'为我工作，而Benny Neugebauer的答案包括target-densitydpi（a feature that is being deprecated） .

    但这对我有用：

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

    这里有许多方法 - 尽管在为了可访问性目的而进行缩放时，位置是 typically users should not be restricted ，但可能会出现需要的情况：

    Render the page at the width of the device, dont scale:

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    Prevent scaling- and prevent the user from being able to zoom:

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

    Removing all zooming, all scaling

    <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" />
    回复于
  • 2

    您可以使用：

    <head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

    但请注意， Android 4.4 属性target-densitydpi is no longer supported . 因此，对于Android 4.4及更高版本，建议将以下内容作为最佳做法：

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    回复于
  • -1

    由于最初的问题仍然没有解决方案，这里是我的纯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;
  }
}
    回复于
  • 1

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

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


<style>
body{
        touch-action: manipulation;
    }
</style>
    回复于
  • 367

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

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

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

    回复于
  • 8

    某些设备视口元标记将无法工作 . 在这种情况下，您可以添加此脚本

    $(document).on('touchmove', false);

    例如：

    </head>
<body>
<script>$(document).on('touchmove', false);</script>
</body>
    回复于

相关问题