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


当前回答

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

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 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才能不缩放页面。

解决此问题的正确方法是将元视口更改为:

<meta name=“viewport”content=“width=设备宽度,初始比例=1,最大比例=1,用户可缩放=0”/>

重要提示:不要设置最小刻度!这将保持页面可手动缩放。

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

这将起到作用:

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

使用(悬停:无)和(指针:粗略)以所有触摸屏设备为目标:

这里的许多答案都依赖于部署JavaScript或jQuery。

但它应该(而且是)完全可以用CSS控制条件字体表示等问题。


Safari Mobile要求(有充分的理由)与任何表单元素交互时,其最小字体大小必须为16px(或视觉等效值)。

让我们致力于让经过深思熟虑的用户体验应用于所有触摸屏浏览器。

然后我们可以采取以下措施:

@media only screen and (hover: none) and (pointer: coarse) {

  input,
  select,
  textarea {
    font-size: 11px;
  }

  input:focus,
  select:focus,
  textarea:focus {
    font-size: 16px;
  }
}

结果

当使用触摸屏设备时,当上面的任何交互式表单元素被聚焦时,该表单元素的字体大小被临时设置为16px。

这反过来会禁用iOS Safari Mobile自动缩放。

用户初始化的捏缩缩放在所有设备上都不受影响,并且永远不会被禁用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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