禁用输入“文本”标签中的自动缩放 - 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">