我制作了一个HTML页面，其<input>标记为type="text"。当我在iPhone上使用Safari点击它时，页面变大（自动缩放）。有人知道如何禁用它吗？
答案 0 :(得分：417)
如果字体大小小于16px，则浏览器会缩放，而表单元素的默认字体大小为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;
}
答案 1 :(得分：213)
@media screen and (-webkit-min-device-pixel-ratio:0) {
select:focus,
textarea:focus,
input:focus {
font-size: 16px;
background: #eee;
}
}
@media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px;
}
}
我添加了背景，因为IOS在选择中没有添加背景。
答案 2 :(得分：170)
如果您的网站设计适合移动设备，则可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了您的移动页面或表单将“浮动”的问题。
答案 3 :(得分：150)
您可以阻止Safari在用户输入期间自动放大文本字段，而禁用用户捏缩放的功能。只需添加maximum-scale=1，但忽略其他答案中建议的用户比例属性。
如果你在一个图层中有一个“浮动”的表格（如果放大），这是一个值得的选择，这可能会导致重要的UI元素移出屏幕。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
答案 4 :(得分：63)
总之，答案是：将表单元素的字体大小设置为至少16px
答案 5 :(得分：33)
input[type='text'],textarea {font-size:1em;}
答案 6 :(得分：20)
解决此问题的正确方法是将元视口更改为：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
答案 7 :(得分：14)
我找不到干净的方式，但这是一个黑客......
1）我注意到鼠标悬停事件发生在缩放之前，但缩放发生在mousedown或焦点事件之前。
2）您可以使用javascript动态更改META视口标记（请参阅Enable/disable zoom on iPhone safari with Javascript?）
所以，试试这个（在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" />');
}
这绝对是一个黑客......可能会出现鼠标悬停/下移并不总是捕获进入/退出的情况，但它在我的测试中运行良好并且是一个可靠的开始。
答案 8 :(得分：13)
我最近（今天：D）不得不整合这种行为。为了不影响原始设计领域，包括组合，我选择在该领域的重点应用转换：
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
答案 9 :(得分：13)
将 user-scalable = 0 添加到viewport meta，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作：）
答案 10 :(得分：8)
在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" />');
}
答案 11 :(得分：7)
许多其他答案已经指出，这可以通过在maximum-scale标记中添加viewport来实现。但是，this has the negative consequence of disabling user zoom on Android devices。 （It does not disable user zoom on iOS devices since v10。）
当设备为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#9039885
const checkIsIOS = () =>
/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
if (checkIsIOS()) {
disableIosTextFieldZoom();
}
答案 12 :(得分：7)
我使用了上面的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;
}
}
我尝试使用.form-control：focus，将其保留为14px，除了焦点，将其更改为16px并且它没有修复iOS8的缩放问题。至少在我使用iOS8的iPhone上，字体大小必须是16px才能让iPhone无法缩放页面。
答案 13 :(得分：6)
这对我有用：
input, textarea {
font-size: initial;
}
答案 14 :(得分：6)
我这样做了，也是用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字体大小破坏了设计，则可能必须调整界面中的其他一些元素。
答案 15 :(得分：5)
经过一段时间的尝试，我想出了这个解决方案
// 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。这将阻止缩放。在焦点事件上，它将字体大小更改回初始值。
与之前发布的解决方案不同，这可以让您将输入的字体大小设置为您想要的任何内容。
答案 16 :(得分：4)
在阅读了几乎每一行并测试各种解决方案之后，感谢所有分享他们解决方案的人，我在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;}
}
答案 17 :(得分：4)
顺便说一句，如果你使用 Bootstrap ，你可以使用这个变种：
.form-control {
font-size: 16px;
}
答案 18 :(得分：2)
我看到这里的人们使用JavaScript或视口功能执行一些奇怪的操作，并关闭所有手动缩放设备。 在我看来，这不应该是一个解决方案。添加此CSS代码段会关闭iOS中的自动缩放，而不会将字体大小更改为16px等固定数字。
默认情况下，我在输入字段使用93.8％（15px）字体大小，通过添加我的CSS片段，它保持在93.8％。无需更改为16px或使其成为固定数字。
input[type="text"]:focus,
textarea:focus {
-webkit-text-size-adjust: 100%;
}
答案 19 :(得分：2)
设置字体大小（对于输入字段）等于正文的字体大小，似乎是阻止浏览器缩小或缩小的原因。
我建议使用font-size: 1rem作为更优雅的解决方案。
答案 20 :(得分：2)
即使有了这些答案，我也花了三天时间才弄清楚发生了什么，将来我可能会再次需要解决方案。
我的情况与所描述的略有不同。
在我的页面上的div中，我有一些可编辑的文本。当用户单击DIFFERENT div（排序按钮）时，我自动在contenteditable div中选择了一些文本（先前已保存并清除的选择范围），在该选择上运行了富文本格式execCommand，然后再次将其清除。
这使我能够根据用户与页面其他位置的div的交互来不可见地更改文本颜色，同时通常保持选择隐藏以使他们在适当的上下文中看到颜色。
好吧，在iPad的Safari上，单击color div会导致屏幕上的键盘出现，而我没有采取任何措施来阻止它。
我终于弄清楚了iPad的操作方式。
它侦听触发选择可编辑文本的touchstart和touchend序列。
发生这种组合时，它将显示屏幕键盘。
实际上，它会进行多莉缩放，在放大可编辑文本的同时扩展基础页面。我花了一天的时间才明白我所看到的。
因此，我使用的解决方案是拦截那些特定颜色div上的touchstart和touchend。在这两个处理程序中，我都停止传播和冒泡并返回false。但是在touchend事件中，我会触发与单击触发相同的行为。
因此，以前，Safari触发了我认为是“ touchstart”，“ mousedown”，“ touchend”，“ mouseup”，“ click”以及由于我的代码而按顺序选择的文本。
由于截距，新的序列只是文本选择。 Safari可以处理其他所有内容并对其进行键盘处理之前，其他所有内容都会被拦截。 touchstart和touchend拦截器也可以防止触发鼠标事件，这在上下文中是完全可以的。
我不知道一种简单的方法来描述此问题，但我认为将其放在这里很重要，因为我在第一次遇到问题后一个小时内就发现了这个线程。
我有98％的把握能确保相同的修复程序可用于输入框和其他任何东西。拦截触摸事件并分别处理它们，而不会使它们传播或冒泡，并考虑在微小的超时后进行任何选择，以确保Safari不会将序列识别为键盘触发。
答案 21 :(得分：2)
对于荷兰大学的网站（在表单控件中使用了15px），我不得不“修复”了自动缩放表单控件的问题。我提出了以下要求：
这是我到目前为止的想法：
/*
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);
}
}
一些注意事项：
答案 22 :(得分：2)
像:focus这样的伪元素无法像以前那样工作。从iOS 11开始，可以在主要样式之前添加一个简单的reset声明（前提是您不要用较小的字体覆盖它们）。
/* Prevent zoom */
select, input, textarea {
font-size: 16px;
}
值得一提的是，对于Tachyons.css这样的CSS库，很容易意外覆盖字体大小。
例如，类f5等效于：fontSize: 1rem，如果您将主体字体比例保持为默认值，则很好。
但是：如果您选择字体大小类别：f6，则它将与fontSize: .875rem一样，显示在向上的小显示屏上。在这种情况下，您需要更详细地了解您的重置声明：
/* Prevent zoom */
select, input, textarea {
font-size: 16px!important;
}
@media screen and (min-width: 30em) {
/* not small */
}
答案 23 :(得分：1)
这在iOS Safari和Chrome上对我有用。对于输入选择器，可以设置class或id以将其括起来。
@supports (-webkit-overflow-scrolling: touch) {
input {
font-size: 16px;
}
}
答案 24 :(得分：1)
受@jirikuchta的回答启发，我通过添加CSS解决了这个问题：
#myTextArea:active {
font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
没有JS，我也没有发现任何闪光或任何东西。
值得注意的是，viewport with最大比例= 1 also works, but not when the page is loaded as an iframe, or if you have some other script modifying the视口等，
答案 25 :(得分：1)
我已经浏览了多个答案。\
maximum-scale=1标签中设置meta的答案在iOS设备上效果很好，但在Android设备上禁用了缩放功能。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";
答案 26 :(得分：1)
您不仅可以将字体大小设置为16px，还可以：
scale() CSS transform和负边距将输入字段缩小到正确的大小。例如，假设您的输入字段最初使用以下样式：
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%;
}
输入字段的逻辑字体大小为16像素，而文本显示为12像素。
我有一篇博客文章，在这里我会详细介绍一下，并将此示例作为可见的HTML：
No input zoom in Safari on iPhone, the pixel perfect way
答案 27 :(得分：1)
这是我在其中一个项目中使用过的一种技巧：
select {
font-size: 2.6rem; // 1rem = 10px
...
transform-origin: ... ...;
transform: scale(0.5) ...;
}
最终得到了我想要的初始样式和比例，但是没有聚焦。
答案 28 :(得分：1)
关于将font-size设置为16px的最佳答案的评论询问这是一个解决方案，如果你想要更大/更小的字体怎么办。
我不知道你们所有人，但是使用px作为字体大小并不是最好的方法，你应该使用em。
我在响应式网站上遇到了此问题，其中我的文本字段大于16像素。我将表单容器设置为2rem，输入字段设置为1.4em。在我的移动查询中，我根据视口更改html字体大小。由于默认html为10，因此我的输入字段在桌面上计算为28px
要删除自动缩放，我必须将输入更改为1.6em。这使我的字体大小增加到32px。略高，几乎不引人注意。在我的iPhone 4＆amp; 5上，我将html字体大小更改为15px（纵向），然后更改为10px（横向）。它显示该像素大小的最佳点是48px，这就是我从1.4em（42px）改为1.6em（48px）的原因。
您需要做的是找到字体大小的最佳位置，然后将其转换为您的rem / em大小。
答案 29 :(得分：1)
基于Stephen Walsh's answer ...此代码可以在不改变焦点输入的字体大小（看起来很蹩脚）的情况下工作，而且它仍适用于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)
});
答案 30 :(得分：1)
由于自动放大（没有缩小）仍然在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>
答案 31 :(得分：0)
我花了一段时间才找到它，但这里是我找到的最好的代码...... 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));
});
答案 32 :(得分：0)
令人惊讶的是，这里有许多关于javascript和视口的答案，只有一个人提到text-size-adjust，我认为这是最好的解决方案。
您可以将其设置为none。
添加以下CSS：
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
答案 33 :(得分：-1)
在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使用它
答案 34 :(得分：-1)
请不要使用Javascript或黑客手段使其正常工作。那会影响您在网络上的项目得分。
这可以解决问题：
input, input:active, input:focus, input:focus-within, input:hover, input:visited {
font-size: 16px!important;
}
答案 35 :(得分：-8)
IT＆＃39; S !!!! 我完成了我的搜索旅程！
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
在 iPhone OS6 ， Android 2.3.3模拟器
上测试我有一个固定宽度为640px的移动网站，我正面对焦点的自动缩放。
我正在尝试分配但是没有一款适用于iPhone和Android！
现在对我来说可以禁用缩放，因为该网站是移动优先设计！
这是我找到的地方： How to do viewport sizing and scaling for cross browser support?