在iPhone上的Safari浏览器中禁用“文本”标签的自动缩放

我没有找到什么简单干净的方法，但这里有一个hack...

1) 我注意到mouseover事件会在缩放之前发生，但缩放会在mousedown或focus事件之前发生。

2) 您可以使用javascript动态更改META viewport标签（参见在JavaScript中启用/禁用iPhone Safari上的缩放？）

因此，请尝试这样做（以jquery显示为紧凑）：

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

这绝对是一种hack方法...可能会有一些情况下mouseover / down不能始终捕捉到进入/退出，但在我的测试中表现良好并且是一个坚实的开始。

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

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

我最近（今天:D）不得不集成这个功能。为了不影响原始设计字段，包括组合框，我选择在字段的焦点应用转换：

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

将以下内容添加到视口 meta 中：user-scalable=0

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

对我很有效 :)

我查看了多个答案。

1. 在 meta 标签中设置 maximum-scale=1 的答案可以在 iOS 设备上正常工作，但会禁用 Android 设备上的缩放功能。
2. 在 onfocus 上设置 font-size: 16px; 的答案对我来说太过于hacky.

因此，我编写了一个JS函数来动态更改 meta 标签。

var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
if (iOS)
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1, maximum-scale=1";
else
    document.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

2021年的解决方案...

好的，我已经阅读了所有旧答案，但它们都没有对我起作用。经过多个小时尝试不同的方法，最终解决方案似乎很简单。

input{
    transform: scale(0.875);
    transform-origin: left center;
    margin-right: -14.28%;
}

已测试在iOS/Android/电脑Chrome上

这使您能够使用14像素字体，如果您需要不同的大小，则缩放因子是14/16 = 0.875，负边距为（1-0.875）/ 0.875 * 100

我的输入父元素设置为"display:flex"并且它会根据父元素增长，因为它具有"flex: 1 1 auto"。可能需要也可能不需要，但我包含它以完整起见。

这对我有用：

input, textarea {
    font-size: initial;
}

这是在iOS 7上有效的Javascript hack。它基于@dlo的回答，但将mouseover和mouseout事件替换为touchstart和touchend事件。基本上，该脚本在启用缩放之前添加了半秒延迟，以防止缩放。

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

我使用了Christina上面的解决方案，但是对于Bootstrap进行了一些小修改，并添加了另一个规则以适用于桌面电脑。Bootstrap的默认字体大小为14px，这会导致缩放。以下更改将其更改为16px，适用于Bootstrap中的“表单控件”，从而防止缩放。

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

非移动浏览器的字体大小将恢复到14像素。

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

我尝试使用.form-control:focus，这将使其保持在14px，除了在焦点上会更改为16px，但它并没有解决iOS8放大的问题。至少在我的iPhone上使用iOS8，字体大小必须在聚焦之前为16px，才能避免iPhone缩放页面。

伪类如:focus不再像以前那样工作。从iOS 11开始，可以在主要样式之前添加一个简单的重置声明（前提是您没有用较小的字体大小覆盖它们）。

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

值得提到的是，对于像Tachyons.css这样的CSS库，很容易意外覆盖您的字体大小。

例如类：f5 等同于：fontSize: 1rem，如果您保持默认的body字体规模，则没有问题。

然而：如果您选择字体大小类：f6，则在小屏幕以上会等同于 fontSize: .875rem。在这种情况下，您需要更具体地声明重置：

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

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

/* not small */

}