禁用自动放大输入“文本”标签-SafariiPhone

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

我找不到干净的方法，但这里有一个黑客…

1）我注意到mouseover事件发生在缩放之前，但缩放发生在mousedown或焦点事件之前。

2）您可以使用javascript动态更改META视口标签（参见使用JavaScript启用/禁用iPhoneSafari上的缩放？）

所以，试试这个（在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" />');}

这绝对是一个黑客……可能会有mouseover/down不总是捕获条目/退出的情况，但它在我的测试中运行良好，是一个坚实的开始。

如果font-size小于16px并且表单元素的默认font-size为11px（至少在Chrome和Safari），浏览器将缩放。

此外，select元素需要附加focus伪类。

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;}

没有必要使用上述所有内容，您可以只设置所需元素的样式，例如：只需text、number和textarea：

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 font-size破坏了设计，界面中的其他一些元素可能必须进行调整。

我最近（今天： 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-eventsvar 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.inner宽度和320像素的iPhone显示计算的。这将只有适用于竖屏中的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-eventsvar 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>

正在iOS7上工作的Javascript hack。这是基于@dlo的答案，但鼠标悬停和鼠标退出事件被触摸开始和触摸结束事件替换。基本上，这个脚本在再次启用缩放之前增加了半秒的超时，以防止缩放。

$("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" />

测试iPhoneOS6，Android 2.3.3模拟器

我有一个固定宽度为640px的移动网站，我正面临着自动变焦的焦点。

我正在尝试分配，但没有人在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));});

基于斯蒂芬·沃尔什的回答…此代码在不更改焦点输入的字体大小的情况下工作（看起来很糟糕），并且它仍然适用于FastClick，我建议将其添加到所有移动站点以帮助带来“Snappy”。调整您的“视口宽度”以满足您的需求。

// disable autozoom when input is focusedvar $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，除了焦点将其更改为16px并且它没有修复iOS8的缩放问题。至少在我使用iOS8的iPhone中，字体大小必须在焦点之前为16px，iPhone不会缩放页面。

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

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

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

将font-size（用于输入字段）设置为等于主体的font-size，似乎可以防止浏览器缩小或缩小。我建议使用font-size: 1rem作为更优雅的解决方案。

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

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

Important: do not set minimum-scale! This keeps the page manually zoomable.

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

我不知道你们所有人，但是使用px的字体大小不是最好的方法，你应该使用em。

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

为了去掉自动缩放，我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是略高一点，几乎看不见。在我的iPhone4和5上，我将我的html字体大小更改为15px的肖像和回到10px的横向。它看起来是该像素大小的最佳点是48px，这就是为什么我从1.4em（42px）更改为1.6em（48px）。

您需要做的是找到font-size上的最佳位置，然后将其转换为您的rem/em大小。

将用户可扩展=0添加到视口元，如下所示

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

为我工作：）

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

// set font-size to 16px to prevent zoominput.addEventListener("mousedown", function (e) {e.target.style.fontSize = "16px";});
// change font-size back to its initial value so the design will not breakinput.addEventListener("focus", function (e) {e.target.style.fontSize = "";});

在“mousedown”上，它将输入的font-size设置为16px。这将阻止缩放。在焦点事件上，它将font-size更改回初始值。

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

在阅读了这里的几乎每一行并测试了各种解决方案之后，感谢所有分享他们解决方案的人，这就是我在iPhone7iOS10. 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;}}

但是，它有一些缺点，由于“悬停”ed和“焦点”ed状态之间发生的快速字体大小变化以及对性能的重绘影响，明显是“跳跃”

您可以防止Safari在用户输入没有期间自动放大文本字段，从而禁用用户缩放的能力。只需添加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 beto 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 focusif (    tn != "SELECT"&&  tn != "TEXTAREA"&& (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1))return;
// disable zoomsetViewport("width=device-width, initial-scale=1.0, user-scalable=0");}
// NOTE: for now assuming this focusIn is caused by user interactionfunction onFocusIn(evt){// reenable zoomsetViewport("width=device-width, initial-scale=1.0, user-scalable=1");}
// add or update the <meta name="viewport"> elementfunction 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);}}

一些备注：

• 请注意，到目前为止，我只在iOS11.3.1上测试了它，但很快就会在其他几个版本上测试它
• 在事件中使用焦点意味着它至少需要5.1iOS（但我看到我们构建的网站在iOS版本中工作，因为9岁是一个很酷的奖励）
• 使用事件委托，因为我工作的很多网站都有可能动态创建表单控件的页面
• 将事件监听器设置为html元素（documents entElement），以便不必等待主体变得可用（不想费心检查文档是否已就绪/已加载状态或需要等待DOMContentLo的事件）

这是我在我的一个项目中使用的黑客：

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

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

而不是简单地将字体大小设置为16px，您可以：

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

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

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

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

由于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文本。

我有一篇博客文章，我会更详细地介绍，并将此示例作为可视超文本标记语言：
无需输入放大SafariiPhone，像素完美方式

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

在你的*.module.ts中声明后，你可以像这样使用它<input noZoomiOS >

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

这将做的伎俩：

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

像:focus这样的伪元素不再像以前那样工作了。从iOS11开始，可以在主样式之前添加一个简单的重置声明（前提是您不会用更小的字体大小覆盖它们）。

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

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

例如class：f5等效于：fontSize: 1rem，如果您将主体字体缩放保持在默认值，则可以。

但是：如果您选择字体大小类：f6，则在向上的小显示屏上相当于fontSize: .875rem。在这种情况下，您需要更具体地说明您的重置声明：

/* Prevent zoom */select, input, textarea {font-size: 16px!important;}
@media screen and (min-width: 30em) {
/* not small */
}

正如许多其他答案已经指出的那样，这可以通过将maximum-scale添加到元viewport标记来实现。然而，这有在Android设备上禁用用户缩放的负面后果。（自v10以来，它不会在iOS设备上禁用用户缩放。）

当设备iOS时，我们可以使用JavaScript将maximum-scale动态添加到元viewport。这实现了两全其美的效果：我们允许用户缩放和，防止iOS缩放到焦点上的文本字段。

| 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#9039885const checkIsIOS = () =>/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {disableIosTextFieldZoom();}

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

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

在我的版本中，我在页面的div中有一些可满足的文本。当用户单击不同的div时，我自动选择了可满足的div中的一些文本（之前已保存和清除的选择范围），对该选择运行富文本执行命令，然后再次清除它。

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

好吧，在iPad的Safari，点击颜色div导致屏幕键盘出现，我所做的一切都无法阻止它。

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

它侦听触发可编辑文本选择的触摸启动和触摸结束序列。

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

实际上，它会在放大可编辑文本的同时扩展底层页面。我花了一天时间才明白我看到的是什么。

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

所以，之前，Safari触发了我认为是“触控启动”，“鼠标下拉”，“触控结束”，“鼠标上拉”，“点击”，因为我的代码，一个文本选择，按照这个顺序。

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

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

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

受到@jirikuchta答案的启发，我通过添加这一点CSS解决了这个问题：

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

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

值得注意的是，带有maximum-scale=1的viewport也可以工作，但当页面作为ifram加载时，或者如果您有其他脚本修改viewport等，则不能。

我已经浏览了多个答案。\'\'

1. 在meta标签中设置maximum-scale=1的答案在iOS设备上运行良好，但在Android设备上禁用捏缩放功能。
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";elsedocument.head.querySelector('meta[name="viewport"]').content = "width=device-width, initial-scale=1";

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

您可以将其设置为none。

添加以下CSS：

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

这适用于我iOSSafari和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

我的输入有一个父级设置为“show： flex”，它会增长以适应父级，因为它有“flex： 1 1 auto”。你可能需要也可能不需要这个，但我为了完整性而包含它。

使用(hover: none) and (pointer: coarse)定位所有触摸屏设备：

这里的一些答案求助于部署javascript或jQuery。

但它应该（而且是）完全有可能控制像条件字体呈现和css这样的关注点。

SafariMobile要求（有充分的理由）任何表单元素在与之交互时，必须具有最小的font-size16px（或视觉等效）。

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

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

@media only screen and (hover: none) and (pointer: coarse) {
input,select,textarea {font-size: 11px;}
input:focus,select:focus,textarea:focus {font-size: 16px;}}

的结果

当使用触摸屏设备时，当上面的任何交互式表单元素被聚焦时，该表单元素的font-size暂时设置为16px。

这反过来会禁用iOSSafariMobileauto-zoom。

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

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

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

说明：最大宽度可根据您的要求定制。