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

Question

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

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

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

Answer 1

Web应用程序的可能解决方案：虽然无法在iOS Safari中禁用缩放，但在从主屏幕快捷方式打开网站时将禁用缩放。添加这些元标记以将您的应用程序声明为“支持Web应用程序”：&nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;content="width=device-width,&nbsp;initial-scale=1.0,&nbsp;maximum-scale=1.0,&nbsp;user-scalable=no"&nbsp;name="viewport"/> &nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;name='apple-mobile-web-app-capable'&nbsp;content='yes'&nbsp;/>但是，如果您的应用程序是自我维持的，则仅使用此功能，因为前向/后退按钮和URL栏以及共享选项均已禁用。（你仍然可以向左和向右滑动）然而这种方法可以像ux一样启用应用程序。全屏浏览器仅在从主屏幕加载站点时启动。在我的根文件夹中包含一个apple-touch-icon-180x180.png后，我也只能使用它。作为奖励，您可能还想要包含此变体：<meta&nbsp;name='apple-mobile-web-app-status-bar-style'&nbsp;content='black-translucent'/>

Answer 2

请尝试添加此元标记和样式<meta&nbsp;content="width=device-width,&nbsp;initial-scale=1.0,&nbsp;maximum-scale=1.0,&nbsp;user-scalable=no"&nbsp;name="viewport"/><style>body{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;touch-action:&nbsp;manipulation; &nbsp;&nbsp;&nbsp;&nbsp;}</style>

Answer 3

由于最初的问题仍然没有解决方案，这里是我的纯CSS两分钱。移动浏览器（大多数）要求输入中的字体大小为16px。所以input[type="text"],input[type="number"],input[type="email"],input[type="tel"],input[type="password"]&nbsp;{ &nbsp;&nbsp;font-size:&nbsp;16px;}解决了这个问题。因此，您无需禁用站点的缩放和松散辅助功能。如果移动设备上的基本字体大小不是16px或不是16px，则可以使用媒体查询。@media&nbsp;screen&nbsp;and&nbsp;(max-width:&nbsp;767px)&nbsp;{ &nbsp;&nbsp;input[type="text"], &nbsp;&nbsp;input[type="number"], &nbsp;&nbsp;input[type="email"], &nbsp;&nbsp;input[type="tel"], &nbsp;&nbsp;input[type="password"]&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-size:&nbsp;16px; &nbsp;&nbsp;}}