在iPhone上禁用自动缩放输入"Text“标签
在iPhone上禁用自动缩放输入"Text“标签
提问于 2010-06-07 20:06:57
我制作了一个带有type="text"的<input>标记的HTML页面。当我在iPhone上使用Safari点击它时，页面变得更大(自动缩放)。有谁知道怎么禁用它吗？
回答 26
Stack Overflow用户
发布于 2011-06-18 15:17:29
如果字体大小小于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;
}Stack Overflow用户
发布于 2013-04-28 02:44:38
@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上添加背景。
Stack Overflow用户
发布于 2012-12-04 23:21:54
如果你的网站是为移动设备设计的，你可以决定不允许缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />这解决了你的移动页面或表单会“浮动”的问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2989263
复制相关文章
相似问题