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


当前回答

正在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" />');
} 

其他回答

@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没有在选择上添加背景。

我最近(今天:D)不得不整合这种行为。为了不影响原始设计字段,包括combo,我选择在字段的焦点处应用转换:

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

经过一段时间的尝试,我想出了这个解决方案

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

在“mousedown”时,它将输入的字体大小设置为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的字体大小破坏了设计,则可能需要调整界面中的其他一些元素。

即使有了这些答案,我也花了三天的时间才弄清楚到底发生了什么,我可能在未来再次需要解决方案。

我的情况与所描述的略有不同。

我在页面的一个div中有一些内容可编辑的文本。当用户单击一个不同的div(一个排序按钮)时,我自动选择了contenteditable div中的一些文本(之前已保存并清除的选择范围),对该选择运行一个富文本execCommand,然后再次清除。

这使我能够根据用户与页面上其他地方的颜色分隔符的交互无形地更改文本颜色,同时保持选择的正常隐藏状态,让他们在适当的上下文中看到颜色。

好吧,在iPad的Safari上,单击颜色分区会导致屏幕上的键盘出现,我所做的一切都不会阻止它。

我终于弄明白iPad是如何做到这一点的。

它监听触发可编辑文本选择的触摸开始和触摸结束序列。

当这种组合发生时,它会显示屏幕键盘。

实际上,它在放大可编辑文本的同时展开基础页面。我花了一天时间才明白我看到了什么。

因此,我使用的解决方案是拦截这些特定颜色div上的touchstart和touchend。在这两个处理程序中,我停止传播和冒泡,并返回false。但在touchend事件中,我触发的行为与单击触发的行为相同。

所以,在之前,Safari触发了我认为是“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”的操作,因为我的代码,一个文本选择,按照这个顺序。

由于拦截而产生的新序列只是文本选择。在Safari处理和执行键盘操作之前,其他所有内容都会被拦截。touchstart和touchend拦截也防止触发鼠标事件,在上下文中这是完全正常的。

我不知道更简单的方法来描述这一点,但我认为这里有它很重要,因为我在第一次遇到这个问题的一小时内就找到了这个线索。

我有98%的把握,同样的修复方法也适用于输入框和其他任何东西。拦截触摸事件并单独处理它们,而不让它们传播或冒泡,并考虑在微小超时后进行任何选择,以确保Safari不会将该序列识别为键盘触发器。