禁用自动缩放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; } 

没有必要使用以上所有的,你可以只需要你需要的元素,例如: textnumbertextarea

 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 OS6Android 2.3.3模拟器上testing

我有一个固定的宽度为640px的移动网站,而我正在面对自动缩放焦点。

我正在尝试分配,但是没有人在iPhone和Android上工作!

现在对我来说可以禁用变焦,因为该网站是移动优先devise!

这是我find它的地方: 如何做视口大小和跨浏览器支持缩放?