如何禁用输入“文本”标签的自动缩放在iPhone上的Safari浏览器?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (10)
  • 关注 (0)
  • 查看 (116)

创建了一个html页面,其中包含<input>类型为“text”的标记。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道怎么禁用这个吗?

提问于
用户回答回答于

我也是用jQuery做的:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

当然,16px字体大小会破坏设计。

用户回答回答于

我最近不得不整合这个行为。为了不影响原始设计字段,包括组合体,我选择将转换应用于该领域的焦点:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}
用户回答回答于

user-scalable=0 要查看元视图,如下所示

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
用户回答回答于

1)我注意到鼠标切换事件发生在缩放之前,但缩放发生在鼠标向下或焦点事件之前。

2)可以使用javascript动态更改metaviewport标记(请参见启用/禁用使用Javascript的iPhone Safari缩放?)

因此,尝试以下操作(jQuery中显示了它的紧凑性):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

在某些情况下,鼠标切换并不总是捕获入口/出口,但它在我的测试中工作得很好,是一个坚实的开端。

用户回答回答于

解决此问题的正确方法是将meta视口更改为:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
用户回答回答于
用户回答回答于

将窗体元素的字体大小设置为至少16 px。

用户回答回答于

如果你的网站是为移动设备正确设计的,你可以决定不允许缩放。

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

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

用户回答回答于
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

IOS仍然会缩放,除非你在没有焦点的情况下对输入使用16 px。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

我添加了一个背景,因为IOS没有在SELECT上添加背景。

用户回答回答于

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

没有必要使用以上所有内容,您只需对所需元素进行样式化,例如:textnumber,和textarea:

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

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

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

所属标签

可能回答问题的人

  • 西风

    renzha.net · 站长 (已认证)

    7 粉丝1 提问9 回答
  • 四无君

    0 粉丝0 提问3 回答
  • 拉布拉多拉不多

    1 粉丝0 提问2 回答
  • 小书虫

    0 粉丝1 提问2 回答

扫码关注云+社区

领取腾讯云代金券