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


当前回答

根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于FastClick,我建议将其添加到所有移动网站,以帮助实现“快速”。调整“视口宽度”以满足您的需要。

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

其他回答

这在iOS Safari和Chrome上对我有效。对于输入选择器,可以将类或id设置为包含当前值。

@supports (-webkit-overflow-scrolling: touch) {
   input {
     font-size: 16px;
   }
}

请不要使用Javascript或黑客来使其工作。这将影响您在网络上的项目分数。

这将起到作用:

input, input:active, input:focus, input:focus-within, input:hover, input:visited {
    font-size: 16px!important;
}

伪元素如:focus不再像以前那样工作。从iOS 11,可以在主样式之前添加一个简单的重置声明(前提是不要用较小的字体大小覆盖它们)。

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

值得一提的是,对于Tachyons.CSS这样的CSS库,很容易意外覆盖字体大小。

例如,class:f5相当于:fontSize:1rem,如果您将主体字体比例保持为默认值,则可以使用。

但是:如果您选择字体大小class:f6,则在向上的小屏幕上,这将相当于fontSize:.875rem。在这种情况下,您需要更具体地说明重置声明:


  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

这个问题的简单解决方案是:

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 16px;
  }
}

注:最大宽度可根据您的要求定制。

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