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


当前回答

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

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

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

其他回答

伪元素如: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 */

}

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

我看到这里的人用JavaScript或viewport函数做了一些奇怪的事情,并关闭了所有设备上的手动缩放。我认为这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放功能,而不会将字体大小更改为固定数字,如16px。

默认情况下,我在输入字段中使用93.8%(15px)的字体大小,通过添加CSS代码段,字体大小保持在93.8%。无需更改为16px或将其设置为固定数字。

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

我花了一段时间才找到它,但这是我找到的最好的代码。。。。。。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));
});

如果你的网站是为移动设备设计的,你可以决定不允许扩展。

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

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