我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
如果你的网站是为移动设备设计的,你可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了移动页面或表单“浮动”的问题。
其他回答
总之,答案是:将表单元素的字体大小设置为至少16px
@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没有在选择上添加背景。
解决此问题的正确方法是将元视口更改为:
<meta name=“viewport”content=“width=设备宽度,初始比例=1,最大比例=1,用户可缩放=0”/>
重要提示:不要设置最小刻度!这将保持页面可手动缩放。
我最近(今天:D)不得不整合这种行为。为了不影响原始设计字段,包括combo,我选择在字段的焦点处应用转换:
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
这在iOS Safari和Chrome上对我有效。对于输入选择器,可以将类或id设置为包含当前值。
@supports (-webkit-overflow-scrolling: touch) {
input {
font-size: 16px;
}
}