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


当前回答

下面是我在一个项目中使用的黑客:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

最终得到了我想要的初始样式和比例,但没有缩放焦点。

其他回答

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

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

我使用了上面Christina的解决方案,但对引导程序进行了小修改,并将另一条规则应用于桌面计算机。Bootstrap的默认字体大小为14px,这会导致缩放。下面将Bootstrap中的“表单控件”更改为16px,以防止缩放。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

对于非移动浏览器,返回到14px。

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

我尝试使用.formcontrol:focu,它将其保持在14px,但focus将其更改为16px,它没有解决iOS8的缩放问题。至少在我使用iOS8的iPhone上,字体大小必须是16px才能对焦,这样iPhone才能不缩放页面。

input[type='text'],textarea {font-size:1em;}

受@jirikuchta的回答启发,我通过添加以下CSS解决了这个问题:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

没有JS,我没有注意到任何闪光或任何东西。

值得注意的是,最大比例为1的视口也可以工作,但当页面作为iframe加载时,或者如果您有其他脚本修改视口等,则无法工作。