禁用自动缩放输入“文本”标签 - iPhone上的Safari [英] Disable Auto Zoom in Input "Text" tag - Safari on iPhone

问题描述

我制作了一个HTML页面，其中包含< input> 标签，其中 type =text。当我在iPhone上使用Safari点击它时，页面变得更大（自动缩放）。是否有人知道如何禁用这个功能？ 解决方案

如果font-size小于 16px ，表单元素的默认字体大小为 11px （至少在Chrome和Safari中）。

另外， select 元素需要附加焦点伪类。 p>



  input [type =color]，
 input [type =date]，
 input [类型=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; 
} 
  




I made an HTML page that has an <input> tag with type="text". When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?

解决方案

The browser will zoom if the font-size is less than 16px and the default font-size for form elements is 11px (at least in Chrome and Safari).

Additionally, the select element needs to have the focus pseudo-class attached.

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;
}

It's not necessary to use all the above, you can just style the elements you need, eg: just text, number, and textarea:

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

Alternate solution to have the input elements inherit from a parent style:

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

这篇关于禁用自动缩放输入“文本”标签 - iPhone上的Safari的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！