禁用输入“文本”标签中的自动缩放 - iPhone上的Safari

Question

我制作了一个带有<input>标签的HTML页面type="text"。当我在iPhone上使用Safari点击它时，页面变大（自动缩放）。有人知道如何禁用它吗？

Answer 1

如果字体大小小于16px并且表单元素的默认字体大小11px（至少在Chrome和Safari中），浏览器将缩放。此外，select元素需要附加focus伪类。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;}这是没有必要使用所有的上面，你可以样式你所需要的元素，如：只是text，number和textarea：input[type='text'],input[type='number'],textarea {  font-size: 16px;}使输入元素继承父样式的替代解决方案：body {  font-size: 16px;}input[type="text"] {  font-size: inherit;}

Answer 2

@media screen and (-webkit-min-device-pixel-ratio:0) {   select:focus,  textarea:focus,  input:focus {    font-size: 16px;    background: #eee;  }}新增功能：IOS仍然可以缩放，除非你在没有焦点的输入上使用16px。@media screen and (-webkit-min-device-pixel-ratio:0) {   select,  textarea,  input {    font-size: 16px;  }}我添加了一个背景，因为IOS在select上没有添加背景。

Answer 3

您可以阻止Safari在用户输入期间自动放大文本字段，而不会禁用用户捏缩放的功能。只需添加maximum-scale=1但省略其他答案中建议的用户比例属性。如果你在一个图层中有一个“浮动”（如果放大），这可能会导致重要的UI元素移出屏幕，这是一个值得的选择。<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">