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


当前回答

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

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

其他回答

根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于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)
    });

一条关于将字体大小设置为16px的顶级答案的评论询问了这是如何解决的,如果你想要更大/更小的字体怎么办。

我不知道你们所有人的情况,但使用px来调整字体大小并不是最好的方法,你应该使用它们。

我在我的响应网站上遇到了这个问题,我的文本字段大于16像素。我的表单容器设置为2em,输入字段设置为1.4em。在移动查询中,我根据视口更改html字体大小。由于默认的html是10,我的输入字段在桌面上计算为28px

为了取消自动缩放,我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是稍微高一点,几乎看不到。在我的iPhone 4和5上,我将html字体大小改为15像素(纵向),改回10像素(横向)。看起来像素大小的最佳点是48px,这就是为什么我从1.4em(42px)改为1.6em(48px)。

你需要做的事情是找到字体大小的最佳位置,然后将其转换为rem/em大小。

将用户scalable=0添加到视区元,如下所示

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

为我工作:)

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

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

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

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

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