禁用自动放大输入“文本”标签 - iPhone 上的 Safari

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

我找不到干净的方法，但这里有一个技巧......

1） 我注意到鼠标悬停事件发生在缩放之前，但缩放发生在鼠标按下或焦点事件之前。

2） 您可以使用 javascript 动态更改 META 视口标签（请参阅使用 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" />');
}

这绝对是一个黑客......在某些情况下，鼠标悬停/向下并不总是能捕捉到进入/退出，但它在我的测试中效果很好，是一个坚实的开始。

如果字体大小小于，并且表单元素的默认字体大小为 （至少在 Chrome 和 Safari 中），则浏览器将缩放。16px11px

此外，该元素需要附加伪类。selectfocus

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

没有必要使用以上所有元素，你可以只设置你需要的元素的样式，例如：只是、和：textnumbertextarea

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

让输入元素继承自父样式的替代解决方案：

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

总之，答案是：将表单元素的字体大小设置为至少 16px

如果您的网站是为移动设备设计的，您可以决定不允许缩放。

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

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

我这样做了，也用jQuery：

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

当然，如果这种字体大小破坏了设计，则可能需要调整界面中的其他一些元素。16px

我最近（今天:D）不得不整合这种行为。为了不影响原始设计领域，包括组合，我选择在领域焦点处应用转换：

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

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

由于自动放大（没有缩小）仍在 iPhone 上宣布，这里有一个基于 dlo 建议的 JavaScript，用于焦点/模糊。

一旦文本输入被模糊处理，并在输入离开时重新分析，缩放就会被禁用。

注意：有些用户可能无法理解在小文本输入中编辑文本！因此，我个人更喜欢在编辑过程中更改输入的文本大小（请参阅下面的代码）。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

以下代码将在元素具有焦点期间将输入的文本大小更改为 16 像素（计算，即在当前缩放大小中）。因此，iPhone不会自动放大。

注意：缩放系数是根据 window.innerWidth 和 iPhone 的 320 像素显示屏计算得出的。这仅适用于纵向模式下的 iPhone。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

在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" />');
} 

这是工作!!我完成了我的搜索之旅！

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

在 iPhone OS6、Android 2.3.3 模拟器上测试

我有一个固定宽度为 640px 的移动网站，我面对的是自动变焦对焦。

我正在尝试分配一些 slution，但没有一个在 iPhone 和 Android 上都有效！

现在对我来说，禁用缩放是可以的，因为该网站是移动优先的设计！

这是我找到它的地方： 如何进行视口大小调整和缩放以获得跨浏览器支持？

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

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

这对我有用：

input, textarea {
    font-size: initial;
}

我使用了上面 Christina 的解决方案，但对 bootstrap 进行了小幅修改，并制定了另一条适用于台式计算机的规则。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;
  }
}

我尝试使用 .form-control：focus，它保留为 14px，除了 on focus 将其更改为 16px，并且它没有解决 iOS8 的缩放问题。至少在我使用 iOS8 的 iPhone 上，字体大小必须在焦点前为 16px，以便 iPhone 不缩放页面。

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

默认情况下，我在输入字段中使用 93.8% （15px） 的字体大小，通过添加我的 CSS 片段，这保持在 93.8%。无需更改为 16px 或使其成为固定数字。

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

将字体大小（对于输入字段）设置为等于正文的字体大小，似乎是阻止浏览器缩小或缩小的原因。 我建议用作更优雅的解决方案。font-size: 1rem

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

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

重要提示：请勿设置 ！这将使页面保持可手动缩放。minimum-scale

关于将 font-size 设置为 16px 的热门答案的评论询问这是如何解决的，如果您想要更大/更小的字体怎么办。

我不了解你们所有人，但使用 px 作为字体大小并不是最好的方法，您应该使用 em。

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

为了删除自动缩放，我不得不将输入更改为 1.6em。这将我的字体大小增加到 32px。只是略高，几乎不明显。在我的 iPhone 4&5 上，我将我的 html 字体大小更改为 15px 纵向，将横向改回 10px。该像素大小的最佳点似乎是 48px，这就是我从 1.4em （42px） 更改为 1.6em （48px） 的原因。

您需要做的是找到字体大小的最佳位置，然后将其向后转换为您的 rem/em 大小。

将 user-scalable=0 添加到视口元，如下所示

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

为我工作:)

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

// 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。这将阻止缩放。在焦点事件中，它会将字体大小更改回初始值。

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

在阅读了这里的几乎每一行并测试了各种解决方案之后，感谢所有分享他们的解决方案的人，这是我在iPhone 7 iOS 10.x上提出，测试并为我工作的内容：

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

不过，它有一些缺点，由于在“悬停”和“聚焦”状态之间快速改变字体大小，以及重绘对性能的影响，因此出现了明显的“跳跃”

您可以阻止 Safari 浏览器在用户输入期间自动放大文本栏，而不会停用用户捏合缩放的功能。只需添加但省略其他答案中建议的 user-scale 属性。maximum-scale=1

如果图层中的表单在缩放时会“浮动”，这可能会导致重要的 UI 元素移出屏幕，则这是一个值得选择的选项。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

顺便说一句，如果您使用 Bootstrap，则可以使用此变体：

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

我不得不“修复”荷兰大学网站的自动放大表单控件问题（在表单控件中使用 15px）。我提出了以下一组要求：

• 用户必须仍能够放大
• font-size 必须保持不变
• 没有临时不同样式的闪光
• 无jQuery要求
• 必须在最新的 iOS 上运行，并且不妨碍任何其他操作系统/设备组合
• 如果可能，没有魔术超时，如果需要，请正确清除计时器

这是我到目前为止想出的：

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

一些注意事项：

• 请注意，到目前为止，我只在iOS 11.3.1上测试了它，但很快就会在其他几个版本上测试它
• 使用 focusIn 事件意味着它至少需要 iOS 5.1（但无论如何，我看到我们在 iOS 9 版本中构建的网站是一个很酷的奖励）
• 使用事件委派，因为我处理的许多网站都有可能动态创建表单控件的页面
• 将 eventListeners 设置为 html 元素 （documentElement），这样就不必等待 body 变得可用（不想费心检查文档是否具有就绪/加载状态或需要等待 DOMContentLoaded 事件）

这是我在我的一个项目中使用的一个技巧：

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

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

您可以：

1. 设置输入字段的样式，使其大于其预期大小，从而允许将逻辑字体大小设置为 16px。
2. 使用 scale（） CSS 转换和负边距将输入字段缩小到正确的大小。

例如，假设您的输入字段最初样式为：

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

如果通过将所有维度增加 16 / 12 = 133.33% 来扩大字段，然后减少使用 12 / 16 = 75%，则输入字段将具有正确的视觉大小（和字体大小），并且不会对焦进行缩放。scale()

由于仅影响视觉对象大小，因此还需要添加负边距以减小字段的逻辑大小。scale()

有了这个CSS：

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

输入字段的逻辑字体大小为 16px，而文本显示为 12px。

我有一篇博文，其中我稍微详细介绍了一下，并将此示例作为可查看的 HTML：
在 iPhone 上的 Safari 中没有输入缩放，像素完美方式

在 Angular 中，您可以使用指令来防止在 IOS 设备上缩放焦点。没有元标记来保留可访问性。

import { Directive, ElementRef, HostListener } from '@angular/core';

const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;

@Directive({ selector: '[noZoomiOS]' })

export class NoZoomiOSDirective {
  constructor(private el: ElementRef) {}

@HostListener('focus')
  onFocus() {
    this.setFontSize('');
  }

@HostListener('mousedown')
  onMouseDown() {
    this.setFontSize(`${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px`);
  }

private setFontSize(size: string) {
  const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);

  if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
      return;
   }

  const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  iOS 
     && (this.el.nativeElement.style.fontSize = size);
 }
}

在<input noZoomiOS >*.module.ts

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

这将解决问题：

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

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

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

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

例如，class： 等同于 ：，如果您将正文字体比例保持在默认值，这很好。f5fontSize: 1rem

但是：如果您选择字体大小类：这将相当于在小型显示器上向上。在这种情况下，您需要更具体地了解重置声明：f6fontSize: .875rem

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

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

/* not small */

}

正如许多其他答案已经指出的那样，这可以通过添加到元标记来实现。但是，这会产生在 Android 设备上禁用用户缩放的负面影响。（自 v10 以来，它不会在 iOS 设备上禁用用户缩放。maximum-scaleviewport

当设备是 iOS 时，我们可以使用 JavaScript 动态添加到元中。这实现了两全其美：我们允许用户缩放并防止 iOS 在焦点上放大文本字段。maximum-scaleviewport

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

法典：

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

即使有了这些答案，我还是花了三天时间才弄清楚发生了什么，将来我可能再次需要解决方案。

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

在我的页面中，我在页面上的 div 中有一些可编辑的文本。当用户单击不同的 div（一种按钮）时，我会自动在 contenteditable div（先前已保存和清除的选择范围）中选择一些文本，对该选择运行富文本 execCommand，然后再次清除它。

这使我能够根据用户与页面上其他位置的颜色 div 的交互来无形地更改文本颜色，同时保持通常隐藏的选择，以便让他们在适当的上下文中看到颜色。

好吧，在 iPad 的 Safari 上，单击颜色 div 会导致屏幕键盘出现，我所做的任何事情都无法阻止它。

我终于弄清楚了iPad是如何做到这一点的。

它侦听触发可编辑文本选择的 touchstart 和 touchend 序列。

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

实际上，它执行了推车缩放，在放大可编辑文本的同时扩展底层页面。我花了一天时间才明白我所看到的。

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

所以，在此之前，Safari 会触发我认为是“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”，并且由于我的代码，按此顺序触发文本选择。

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

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

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

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

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

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

值得注意的是，a with 也有效，但当页面作为 iframe 加载时，或者如果您有其他脚本修改 ，等等时就不行了。viewportmaximum-scale=1viewport

我已经查看了多个答案。

1. 在标签中设置的答案在 iOS 设备上工作正常，但在 Android 设备上禁用捏合缩放功能。maximum-scale=1meta
2. 有设置的那个对我来说太骇人听闻了。font-size: 16px;onfocus

所以我写了一个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";

令人惊讶的是，这里有几十个关于javascript和视口的答案，只有一个提到我认为这是最好的解决方案。text-size-adjust

您可以将其设置为 。none

添加以下 CSS：

* {
 -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

这在 iOS、Safari 和 Chrome 上对我有用。对于输入选择器，可以设置类或 id 以包围当前。

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

2021年解决方案...

好的，我已经通读了所有的旧答案，但没有一个对我有用。经过几个小时的尝试，最终解决方案似乎很简单。

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

在 PC 上的 iOS/Android/Chrome 上测试

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

我的输入将父项设置为“display：flex”，并且由于具有“flex： 1 1 auto”，因此它会增长以适合父项。您可能需要也可能不需要它，但我将其包括在内以确保完整。

使用 （hover： none） 和 （pointer： coarse） 定位所有触摸屏设备：

这里的许多答案都诉诸于部署 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;
  }
}

结果

使用触摸屏设备时，当上述任何交互式表单元素聚焦时，该表单元素的 OF 将暂时设置为 。font-size16px

反过来，这会禁用 iOS Safari Mobile .auto-zoom

用户启动的捏合缩放在所有设备上都不受影响，并且永远不会被禁用。

此问题的简单解决方案是：

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 16px;
  }
}

注意：max-width可以根据您的要求定制。

最近使用包含 .仅使用以下 CSS 解决（无视口或脚本黑客）....input-group-sm.form-control

input, textarea {
    font-size: 1rem !important;
}
@media (min-width: 768px) {
    input, textarea {
        font-size: inherit !important;
    }
}

这应该使字体足够大，以避免在小型设备上自动缩放。根据需要增加平板电脑的媒体断点（没有可用于测试的断点）。min-width

对于 android 和 iOS，解决方案是不同的。如果我们放置 maximum-scale=1，那么它将停止 android 设备的放大功能，但在 iOS 设备上，它可以预期地工作。 添加此解决方案以在 react 应用程序中解决此问题（在 index.js 文件中）

// Detect the device OS
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

// Set viewport properties based on the device OS
const viewportContent = isIOS
    ? 'width=device-width, initial-scale=1, maximum-scale=1'
    : 'width=device-width, initial-scale=1, shrink-to-fit=no';

// Create a meta tag and append it to the document head
const metaTag = document.createElement('meta');
metaTag.name = 'viewport';
metaTag.content = viewportContent;
document.head.appendChild(metaTag);