如何避免自动放大适合移动设备的网页

Question

我正在尝试创建一个适合移动设备的网页。当我在手机上查看它时，我必须缩小才能看到正确的尺寸。如何让它正常显示而不必缩小？我正在使用以下代码：

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

Answer 1

如果字体大小小于 16px，并且表单元素的默认字体大小为 11px(至少在 Chrome 和 Safari 中(，浏览器将缩放。

此外，select 元素需要附加焦点伪类。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

没有必要使用上述所有内容，您只需设置所需的元素样式，例如：只需文本、number和textarea：

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

让输入元素继承自育儿样式的替代解决方案：

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

希望它对你有帮助。

^{从这个答案}