禁用自动缩放input“文本”标签 – iPhone上的Safari
我做了一个html页面，它有一个types为“text”的<input>标签。 当我在iPhone上使用Safari点击它时，页面变得更大（自动缩放）。 有谁知道如何禁用这个？
如果字体大小小于16px ，表单元素的默认字体大小为11px （至less在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; }
使input元素从父typesinheritance的替代解决scheme：
body { font-size: 16px; } input[type="text"] { font-size: inherit; }
@media screen and (-webkit-min-device-pixel-ratio:0) { select:focus, textarea:focus, input:focus { font-size: 16px; background: #eee; } }
新的：IOS仍然会缩放，除非你在没有焦点的input上使用16px。
@media screen and (-webkit-min-device-pixel-ratio:0) { select, textarea, input { font-size: 16px; } }
我添加了背景，因为IOS在select上没有添加背景。
如果您的网站是针对移动设备正确devise的，则可以决定不允许缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了您的移动网页或表单将“浮动”的问题。
总之，答案是：将表单元素的字体大小设置为至less16px
input[type='text'],textarea {font-size:1em;}
正确的方法来解决这个问题是改变元视口为：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
有没有干净的方式，我可以find，但这里是一个黑客…
1）我注意到mouseover事件发生在缩放之前，但缩放发生在mousedown或焦点事件之前。
2）你可以dynamic地改变使用javascript的META视口标签（请参阅启用/禁用使用JavaScript Safari 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" />'); }
这绝对是一个黑客…有可能是鼠标hover/下降不总是赶上进出口的情况，但它在我的testing中运行良好，是一个坚实的开始。
将用户可伸缩= 0添加到视口meta，如下所示
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
为我工作:)
我最近（今天：D）不得不整合这种行为。 为了不影响包括组合在内的原始devise领域，我select在该领域的重点应用转换：
input[type="text"]:focus, input[type="password"]:focus, textarea:focus, select:focus { font-size: 16px; }
这是基于@dlo的答案，但mouseover和mouseout事件被replace为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" />'); }
我上面使用了克里斯蒂娜的解决scheme，但是对引导程序进行了小修改，另一个规则适用于台式计算机。 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的缩放问题。 至less在使用iOS8的iPhone上，字体大小必须为16px，然后才能使iPhone无法缩放页面。
我这样做，也用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字体大小打破了devise，接口中的其他一些元素也许会被调整。
这对我工作：
input, textarea { font-size: initial; }
从iOS 10（或更早版本）开始，您可以防止Safari在用户input时自动放大文本字段， 而不禁用用户缩放缩放的能力。 只需添加maximum-scale=1但省略其他答案中build议的用户级属性。 （我想把这个作为对这些答案中的一个的评论join，但显然我没有特权。）
如果缩放图层中的某个表单“浮动”，这会导致重要的UI元素移出屏幕，这是一个有价值的select。
<meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">
我看到这里的人用JavaScript或视口function做一些奇怪的事情，并closures所有手动缩放设备。 我认为这不应该是一个解决办法。 添加此CSS片段将closuresiOS中的自动缩放function，而不会将字体大小更改为像16px这样的固定数字。
默认情况下，我在input字段中使用93.8％（15px）的字体大小，并添加我的CSS代码片段，保持在93.8％。 不需要改变为16px或使其成为一个固定的数字。
input[type="text"]:focus, textarea:focus { -webkit-text-size-adjust: 100%; }
设置一个等于主体字体大小的字体大小（对于input字段）似乎是防止浏览器缩小或放入的。我build议使用font-size: 1rem作为更优雅的解决scheme。
经过一段时间的努力，我想出了这个解决scheme
// 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”它将input的字体大小设置为16px。 这将防止缩放。 焦点事件时，它将字体大小更改为初始值。
与之前发布的解决scheme不同，这将允许您将input的字体大小设置为任何您想要的值。
在阅读了几乎每一行代码并testing各种解决scheme之后，感谢所有分享他们解决scheme的人员，我在iPhone 7 iOS 10.x上为我提出，testing和工作：
@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;} }
但是，它有一些缺点，因为在“盘旋”和“焦点”状态之间发生快速字体大小变化而引起的“跳跃”，以及重绘对性能的影响
由于自动放大（没有缩小）仍然在iPhone上进行annonying，下面是一个基于dlo的build议与焦点/模糊工作的JavaScript。
只要文本input被保险起来，缩放function就会被禁用，并且在input被保留的情况下可以重新固定。
注意：有些用户可能不会在小文本input中编辑文本！ 因此，我个人更喜欢在编辑期间更改input的文本大小（请参阅下面的代码）。
<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>
以下代码将在元素拥有焦点时将input的文本大小更改为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>
根据Stephen Walsh的回答 …这段代码在不改变焦点input的字体大小的情况下工作（这看起来很蹩脚），加上它仍然适用于FastClick ，我build议将它添加到所有的移动网站，以帮助“快速”。 调整您的“视口宽度”，以满足您的需求。
// 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) });
关于将字体大小设置为16px的最佳答案的评论问了这是一个怎样的解决scheme，如果你想要更大/更小的字体。
我不知道你们所有人，但使用字体大小的px不是最好的方式去，你应该使用EM。
我在我的文本字段大于16像素的响应网站上遇到了这个问题。 我有我的表单容器设置为2rem和我的input字段设置为1.4em。 在我的移动查询中，我根据视口更改了html字体大小。 由于默认的html是10，我的input字段在桌面上计算为28px
要删除自动缩放，我不得不改变我的input1.6em。 这增加了我的字体大小为32px。 只是略高，几乎不明显。 在我的iPhone 4和5上，我将html字体大小更改为纵向15px，横向更改为10px。 它显示那个像素大小的甜蜜点是48px，这就是为什么我从1.4em（42px）改为1.6em（48px）的原因。
你需要做的是find字体大小的甜蜜点，然后在rem / em大小的情况下将其反转。
我花了一段时间才find它，但这是我find的最好的代码…… 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)); });
是工作！！！ 我完成我的search旅程！
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
在iPhone OS6 ， Android 2.3.3模拟器上testing
我有一个固定的宽度为640px的移动网站，而我正在面对自动缩放焦点。
我正在尝试分配，但是没有人在iPhone和Android上工作！
现在对我来说可以禁用变焦，因为该网站是移动优先devise！
这是我find它的地方： 如何做视口大小和跨浏览器支持缩放？
