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

Question

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

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

然而，在我的例子中，当看到运行iOS 9.2的aniPhone 5s时，我仍然会略微放大。

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

放大后，你可以看出，页面有点缩放。

如何锁定它？

http://jsbin.com/kicoyapudo/1/edit?html,css,js

以及在移动野生动物园中查看的简单操作： 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;
 }