webkit 移动输入缩放在添加宽度属性时禁用静止缩放

Question

关于如何在聚焦输入字段上禁用自动缩放的大量帖子。

我的解决方案是 'font-size:16px;' 和适当的元视口设置以防止页面缩放。

但是，在我的示例中，当在 iPhone 5s 运行 iOS 9.2 上查看时，我仍然得到了轻微的缩放。

我将所有内容的边距都设置为 0，在页面加载时，您可以看到输入字段的红色边框触及侧面的视口。

放大后，您会发现页面放大了一点。

如何锁定它？

和在移动浏览器中查看的普通输出： http://output.jsbin.com/kicoyapudo/1

body,html,input,form {
  margin:0;
  padding:0;
}

input[type='text'] {
width:100%;
  font-size: 16px;
  border:1px solid #900;
}

Answer 1

边框创建的宽度大于 100%，会溢出正文。

使用：

input[type='text'] {
  box-sizing : border-box;  // border wont add to the width
  width:100%;
 font-size: 16px;
 border:1px solid #900;
 }

Answer 2

解决此问题的最简单方法是添加元标记

 <meta name="viewport" content="user-scalable=0" />

webkit mobile input zoom disable still zooming when adding width attribute