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


当前回答

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

这里的许多答案都依赖于部署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自动缩放。

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

其他回答

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

顺便说一下,如果您使用Bootstrap,您可以只使用此变体:

.form-control {
  font-size: 16px;
}

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

这里的许多答案都依赖于部署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自动缩放。

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

经过一段时间的尝试,我想出了这个解决方案

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

在“mousedown”时,它将输入的字体大小设置为16px。这将阻止缩放。在焦点事件中,它将字体大小更改回初始值。

与之前发布的解决方案不同,这将允许您将输入的字体大小设置为任意大小。

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

这将起到作用:

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