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

Question

如何在移动网页上“禁用”缩放？我正在创建一个移动网页，它基本上是一个包含多个文本输入的大表单。但是（至少在我的Android手机上），每次点击某些输入时，整个页面都会缩放，遮挡页面的其余部分。是否有一些HTML或CSS命令可以在moble网页上禁用这种缩放？

Answer 1

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

Answer 2

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

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/><style>body{
        touch-action: manipulation;
    }</style>

Answer 3

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