我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?


当前回答

我花了一段时间才找到它,但这是我找到的最好的代码。。。。。。http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

其他回答

如果字体大小小于16px,并且表单元素的默认字体大小为11px(至少在Chrome和Safari中),浏览器将进行缩放。

此外,select元素需要附加焦点伪类。

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

不需要使用以上所有内容,您可以只设置所需元素的样式,例如:仅文本、数字和文本区域:

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

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

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

总之,答案是:将表单元素的字体大小设置为至少16px

我用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的字体大小破坏了设计,则可能需要调整界面中的其他一些元素。

正在iOS 7上运行的Javascript黑客。这是基于@dlo的回答,但mouseover和mouseout事件被touchstart和touchend事件替换。基本上,该脚本在再次启用缩放之前添加半秒超时,以防止缩放。

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

将字体大小(用于输入字段)设置为等于正文的字体大小,似乎是阻止浏览器缩小或缩小的原因。我建议使用字体大小:1rem作为更优雅的解决方案。