ios – 在输入“文本”标签中禁用自动缩放 – 在iPhone上安装Safari

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


如果字体大小小于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;
}

这是没有必要使用所有的上面,你可以样式你所需要的元素,如:只是textnumbertextarea

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

使输入元素继承父样式的替代解决方案:

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

@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上没有添加背景。


如果您的网站设计适合移动设备,则可以决定不允许扩展。

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

这解决了您的移动页面或表单将“浮动”的问题。


从iOS 10(或可能更早)开始,您可以阻止Safari在用户输入期间自动放大文本字段,而不会禁用用户捏缩放的功能。只需添加maximum-scale=1但省略其他答案中建议的用户比例属性。

如果你在一个图层中有一个“浮动”(如果放大),这可能会导致重要的UI元素移出屏幕,这是一个值得的选择。

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

添加评论

友情链接:蝴蝶教程