blocks|key|1229799|text|input[type='text'],textarea+{font-size:1em;}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1229800|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>input[type='text'],textarea {font-size:1em;}
</code></pre>

blocks|key|1015289|text|我找不到干净利落的办法，但这里有个黑客……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015290|1)我注意到mouseover事件发生在缩放之前，但缩放发生在mousedown或focus事件之前。|1015291|2)您可以使用javascript动态更改元视口标记(参见Enable/disable+zoom+on+iPhone+safari+with+Javascript?)|offset|length|1015292|因此，试试这个(为了简洁，在jquery中显示)：|1015293|$("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"+/>');
}|code-block|syntax|javascript|1015294|这绝对是个黑客..。也许在某些情况下，mouseover/down并不总是捕捉入口/出口，但它在我的测试中工作得很好，是一个可靠的开始。|1015295|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2750028/enable-disable-zoom-on-iphone-safari-with-javascript/3357148#3357148^0|0|0|T|1H|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

There's no clean way I could find, but here's a hack...

1) I noticed that the mouseover event happens prior to the zoom, but the zoom happens before mousedown or focus events.

2) You can dynamically change the META viewport tag using javascript (see <a href="https://stackoverflow.com/questions/2750028/enable-disable-zoom-on-iphone-safari-with-javascript/3357148#3357148">Enable/disable zoom on iPhone safari with Javascript?</a>)

So, try this (shown in jquery for compactness):

<pre><code>$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
 $('head meta[name=viewport]').remove();
 $('head').prepend('&lt;meta name="viewport" content="user-scalable=0" /&gt;');
}
function zoomEnable(){
 $('head meta[name=viewport]').remove();
 $('head').prepend('&lt;meta name="viewport" content="user-scalable=1" /&gt;');
}
</code></pre>

This is definitely a hack... there may be situations where mouseover/down don't always catch entries/exits, but it worked well in my tests and is a solid start.

blocks|key|1015345|text|如果字体大小小于16px并且表单元素的默认字体大小为11px+(至少在Chrome和Safari中)，浏览器将进行缩放。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1015346|此外，select元素需要附加focus伪类。|1015347|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;
}|code-block|syntax|javascript|1015348|没有必要使用上面的所有内容，您可以只设置所需元素的样式，例如：text、number和textarea|1015349|input[type='text'],
input[type='number'],
textarea+{
++font-size:+16px;
}|1015350|从父样式继承输入元素的替代解决方案：|1015351|body+{
++font-size:+16px;
}
input[type="text"]+{
++font-size:+inherit;
}|1015352|entityMap^0|8|4|Q|4|0|3|6|F|5|0|0|V|4|10|6|17|8|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|16|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|17|8|@$9|18|A|19|B|C]|$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|O|3|P|5|J|7|1E|8|@]|D|@]|E|$K|L]]|$1|Q|3|R|5|6|7|1F|8|@]|D|@]|E|$]]|$1|S|3|T|5|J|7|1G|8|@]|D|@]|E|$K|L]]|$1|U|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|V|$]]

The browser will zoom if the font-size is less than <code>16px</code> and the default font-size for form elements is <code>11px</code> (at least in Chrome and Safari).

Additionally, the <code>select</code> element needs to have the <code>focus</code> pseudo-class attached.

<pre><code>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;
}
</code></pre>

It's not necessary to use all the above, you can just style the elements you need, eg: just <code>text</code>, <code>number</code>, and <code>textarea</code>:

<pre><code>input[type='text'],
input[type='number'],
textarea {
 font-size: 16px;
}
</code></pre>

Alternate solution to have the input elements inherit from a parent style:

<pre><code>body {
 font-size: 16px;
}
input[type="text"] {
 font-size: inherit;
}
</code></pre>

blocks|key|1015375|text|总之，答案是:将表单元素的字体大小设置为至少16px|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015376|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

In summary the answer is: set the font size of the form elements to at least 16px

blocks|key|1015410|text|如果你的网站是为移动设备设计的，你可以决定不允许缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015411|<meta+name="viewport"+content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=0"+/>|code-block|syntax|javascript|1015412|这解决了你的移动页面或表单会“浮动”的问题。|1015413|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

If your website is properly designed for a mobile device you could decide not allow scaling.

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /&gt;
</code></pre>

This solves the problem that your mobile page or form is going to 'float' around.

blocks|key|1015435|text|我做了这件事，也是用jQuery：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015436|$('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'));
});|code-block|syntax|javascript|1015437|当然，如果这种16px字体大小破坏了设计，那么界面中的一些其他元素可能不得不进行调整。|offset|length|style|CODE|1015438|entityMap^0|0|0|7|4|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I did this, also with jQuery:

<pre><code>$('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'));
});
</code></pre>

Of course, some other elements in the interface may have to be adapted if this <code>16px</code> font-size breaks the design.

blocks|key|1230078|text|我最近(今天:D)不得不集成这个行为。为了不影响原始的设计领域，包括组合，我选择在领域的焦点应用转换：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230079|input[type="text"]:focus,+input[type="password"]:focus,
textarea:focus,+select:focus+{
++font-size:+16px;
}|code-block|syntax|javascript|1230080|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I recently (today :D) had to integrate this behavior. In order to not impact the original design fields, including combo, I opted to apply the transformation at the focus of the field:

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

blocks|key|1230150|text|@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{+
++select:focus,
++textarea:focus,
++input:focus+{
++++font-size:+16px;
++++background:+#eee;
++}
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1230151|新:+IOS仍然会缩放，除非你在没有焦点的情况下在输入上使用16px。|unstyled|1230152|@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{+
++select,
++textarea,
++input+{
++++font-size:+16px;
++}
}|1230153|我添加了一个背景，因为IOS没有在select上添加背景。|1230154|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|I|3|J|5|F|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|F|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) { 
 select:focus,
 textarea:focus,
 input:focus {
 font-size: 16px;
 background: #eee;
 }
}
</code></pre>

<h2>New: IOS will still zoom, unless you use 16px on the input without the focus.</h2>

<pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) { 
 select,
 textarea,
 input {
 font-size: 16px;
 }
}
</code></pre>

I added a background since IOS adds no background on the select.

blocks|key|1015614|text|Javascript+hack在iOS+7上工作。这是基于@dlo的回答，但鼠标悬停和鼠标输出事件被touchstart和touchend事件取代。基本上，这个脚本在再次启用缩放之前添加了半秒超时以防止缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015615|$("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"+/>');
}+|code-block|syntax|javascript|1015616|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Javascript hack which is working on iOS 7. This is based on @dlo 's answer but mouseover and mouseout events are replaced by touchstart and touchend events. Basicly this script add a half second timeout before the zoom would enabled again to prevent zooming.

<pre><code>$("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('&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" /&gt;');
}
function zoomEnable(){
 $('head meta[name=viewport]').remove();
 $('head').prepend('&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" /&gt;');
} 
</code></pre>

blocks|key|1015650|text|我花了一段时间才找到它，但这是我找到的最好的代码……http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1015651|var+$viewportMeta+=+$('meta[name="viewport"]');
$('input,+select,+textarea').bind('focus+blur',+function(event)+{
$viewportMeta.attr('content',+'width=device-width,initial-scale=1,maximum-scale='+%2B++++++++(event.type+==+'blur'+?+10+:+1));
});|code-block|syntax|javascript|1015652|entityMap|0|LINK|mutability|MUTABLE|url|http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/^0|Q|1K|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

It took me a while to find it but here's the best code that I found......<a href="http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/" rel="nofollow">http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/</a>

<pre><code>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));
});
</code></pre>

blocks|key|1015688|text|基于Stephen+Walsh's+answer..。这段代码不会改变focus上输入的字体大小(看起来很差劲)，而且它仍然适用于FastClick，我建议将它添加到所有移动网站中，以帮助带来“时髦”。调整你的“视窗宽度”，以满足你的需要。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1015689|//+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)
++++});|code-block|syntax|javascript|1015690|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/24085157/1052231|1|https://github.com/ftlabs/fastclick^0|2|M|0|1T|9|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

Based on <a href="https://stackoverflow.com/a/24085157/1052231">Stephen Walsh's answer</a>... This code works without changing the font size of inputs on focus (which looks lame), plus it still works with <a href="https://github.com/ftlabs/fastclick" rel="nofollow noreferrer">FastClick</a>, which I suggest adding to all mobile sites to help bring the "snappy". Adjust your "viewport width" to suit your needs.

<pre><code>// disable autozoom when input is focused
 var $viewportMeta = $('head &gt; 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)
 });
</code></pre>

blocks|key|1015700|text|这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1015701|input,+textarea+{
++++font-size:+initial;
}|code-block|syntax|javascript|1015702|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me:

<pre><code>input, textarea {
 font-size: initial;
}
</code></pre>

blocks|key|1230441|text|我使用了上面的Christina的解决方案，但对bootstrap做了一些小的修改，并将另一个规则应用于台式计算机。Bootstrap的默认字体大小是14px，这会导致缩放。下面的代码将Bootstrap中的“表单控件”更改为16px，以防止缩放。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230442|@media+screen+and+(-webkit-min-device-pixel-ratio:0)+{
++.form-control+{
++++font-size:+16px;
++}
}|code-block|syntax|javascript|1230443|对于非移动浏览器，又回到了14px。|1230444|@media+(min-width:+768px)+{
++.form-control+{
++++font-size:+14px;
++}
}|1230445|我尝试使用.form-control:+focus，除了focus之外，它仍然是14px，它把它变成了16px，而且它没有解决iOS8的缩放问题。至少在我使用iOS8的iPhone上，focus之前的字体大小必须是16px，这样iPhone才不会缩放页面。|1230446|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I used Christina's solution above, but with a small modification for bootstrap and another rule to apply to desktop computers. Bootstrap's default font-size is 14px which causes the zoom. The following changes it to 16px for "form controls" in Bootstrap, preventing the zoom.

<pre><code>@media screen and (-webkit-min-device-pixel-ratio:0) {
 .form-control {
 font-size: 16px;
 }
}
</code></pre>

And back to 14px for non-mobile browsers.

<pre><code>@media (min-width: 768px) {
 .form-control {
 font-size: 14px;
 }
}
</code></pre>

I tried using .form-control:focus, which left it at 14px except on focus which changed it to 16px and it did not fix the zoom problem with iOS8. At least on my iPhone using iOS8, the font-size has to be 16px before focus for the iPhone to not zoom the page.

blocks|key|1230497|text|我看到这里的人用JavaScript或视窗功能做了一些奇怪的事情，并关闭了设备上的所有手动缩放。在我看来，这不应该是一个解决方案。添加此CSS片段将关闭iOS中的自动缩放，而不会将字体大小更改为固定数字，如16px。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230498|默认情况下，我在输入字段中使用93.8%25+(15px)的字号，通过添加我的CSS代码片段，字号保持在93.8%25。不需要更改为16px或将其设置为固定数字。|1230499|input[type="text"]:focus,
textarea:focus+{
++++-webkit-text-size-adjust:+100%25;
}|code-block|syntax|javascript|1230500|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I see people here do some strange stuff with JavaScript or the viewport function and turning off all manually zooming on devices.
That shouldn't be a solution in my opinion. Adding this CSS snippet will turn off the auto-zoom in iOS without changing your font-size to a fixed number like 16px.

By default, I use 93.8% (15px) font-size at input fields and by adding my CSS snippet this stays at 93.8%. No need to change to 16px or make it a fixed number.

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

blocks|key|1015900|text|将字体大小(用于输入字段)设置为与正文的字体大小相等，这似乎是阻止浏览器缩小或放大的原因。我建议使用font-size:+1rem作为一个更优雅的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1015901|entityMap^0|1E|F|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

Setting a font-size (for input fields) equal to the body's font-size, seems to be what prevents the browser from zooming out or in.
I'd suggest to use <code>font-size: 1rem</code> as a more elegant solution.

blocks|key|1230637|text|解决此问题的正确方法是将元视口更改为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230638|​|1230639|<meta+name="viewport"+content="width=device-width,+initial-scale=1,+maximum-scale=1,+user-scalable=0"/>|code-block|syntax|javascript|1230640|1230641|重要提示:不要设置minimum-scale！这将使页面保持手动缩放。|offset|length|style|CODE|1230642|entityMap^0|0|0|0|0|9|D|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|V|8|@$L|W|M|X|N|O]]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

Proper way to fix this issue is to change meta viewport to:
<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/&gt;</code></pre>
</div>
</div>

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

blocks|key|1230786|text|关于将font-size设置为16px的顶部答案的评论问道，这是一个怎样的解决方案，如果你想要更大/更小的字体怎么办。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230787|我不知道你们所有人，但使用px字体大小不是最好的方法，你应该使用它们。|1230788|我在我的响应式站点上遇到了这个问题，我的文本字段大于16像素。我将表单容器设置为2rem，并将输入字段设置为1.4em。在我的移动查询中，我根据视窗改变了html的字体大小。由于默认html为10，我的输入字段在桌面上的计算结果为28px|1230789|要删除自动缩放功能，我必须将输入更改为1.6em。这使我的字体大小增加到32px。只是稍微高一点，几乎不明显。在我的iPhone+4和5上，我把我的HTML字号改成了15px的肖像字体，改回了10px的风景字体。显然，该像素大小的最佳位置是48px，这就是为什么我将其从1.4em+(42px)改为1.6em+(48px)。|1230790|您需要做的是找到font-size的最佳位置，然后将其反向转换为rem/em大小。|1230791|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|N|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|O|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

A comment for the top answer about setting font-size to 16px asked how that is a solution, what if you want bigger/smaller font.

I don't know about you all, but using px for font sizes is not the best way to go, you should be using em.

I ran into this issue on my responsive site where my text field is larger than 16 pixels. I had my form container set to 2rem and my input field set to 1.4em. In my mobile queries I change html font-size depending on the viewport. Since the default html is 10, my input field calculates to 28px on desktop

To remove the auto-zoom I had to change my input to 1.6em. This increased my font size to 32px. Just slightly higher and hardly noticeable. On my iPhone 4&amp;5 I change my html font-size to 15px for portrait and back to 10px for landscape. It appeard that the sweet spot for that pixel size was 48px which is why I changed to from 1.4em (42px) to 1.6em (48px).

The thing you need to do is find the sweet spot on font-size and then convert it backwards in your rem/em sizes.

blocks|key|1230845|text|经过一段时间的尝试，我想出了这个解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1230846|//+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+=+"";
});|code-block|syntax|javascript|1230847|在"mousedown“中，它将输入的字体大小设置为16px。这将阻止缩放。在focus事件中，它将font-size改回初始值。|1230848|与之前发布的解决方案不同，这将允许您将输入的字体大小设置为您想要的任何大小。|1230849|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

After a while of while trying I came up with this solution

<pre class="lang-js prettyprint-override"><code>// 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 = "";
});
</code></pre>



On "mousedown" it sets font-size of input to 16px. This will prevent the zooming. On focus event it changes font-size back to initial value. 

Unlike solutions posted before, this will let you set the font-size of the input to whatever you want.

blocks|key|1016202|text|在阅读了这里的几乎每一行并测试了各种解决方案后，感谢所有分享他们的解决方案的人，这是我在iPhone+7+iOS+10.x上为我提出、测试和工作的内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016203|@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;}
}|code-block|syntax|javascript|1016204|然而，它有一些缺点，值得注意的是，由于在"hover"ed和"focus"ed状态之间发生的快速字体大小更改以及重绘对性能的影响，它会出现“跳跃”。|1016205|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

After reading almost every single line here and testing the various solutions, this is, thanks to all who shared their solutions, what I came up with, tested and working for me on iPhone 7 iOS 10.x :

<pre><code>@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;}
}
</code></pre>

It has some cons, though, noticeably a "jump" as result of the quick font size change occuring between the "hover"ed and "focus"ed states - and the redraw impact on performance

blocks|key|1016284|text|这是我在我的一个项目中使用的一个技巧：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016285|select+{
++++font-size:+2.6rem;+//+1rem+=+10px
++++...
++++transform-origin:+...+...;
++++transform:+scale(0.5)+...;
}|code-block|syntax|javascript|1016286|最终得到了我想要的初始样式和比例，但没有对焦点进行缩放。|1016287|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Here is a hack I used on one of my projects:

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

Ended up with the initial styles and scale I wanted but no zoom on focus.

blocks|key|1016339|text|在Angular中，你可以使用指令来阻止IOS设备上的焦点缩放。没有元标记来保留可访问性。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016340|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+<=+%2BcurrentInputFontSize.match(/\d%2B/))+{
++++++return;
+++}

++const+iOS+=+navigator.platform+&&+/iPad%7CiPhone%7CiPod/.test(navigator.platform);
++iOS+
+++++&&+(this.el.nativeElement.style.fontSize+=+size);
+}
}|code-block|syntax|javascript|1016341|在*.module.ts中声明它之后，可以像这样使用它的<input+noZoomiOS+>|offset|length|style|CODE|1016342|entityMap^0|0|0|1|B|S|I|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

In Angular you can use directives to prevent zooming on focus on IOS devices. No meta tag to preserve accessibility.

<pre><code>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 &lt;= +currentInputFontSize.match(/\d+/)) {
 return;
 }

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

You can use it like this <code>&lt;input noZoomiOS &gt;</code> after you declare it in your <code>*.module.ts</code>

blocks|key|1016433|text|像:focus这样的伪元素不再像以前那样工作了。在iOS+11中，可以在主样式之前添加一个简单的重置声明(前提是您没有用较小的字体大小覆盖它们)。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1016434|/*+Prevent+zoom+*/
select,+input,+textarea+{
++font-size:+16px;
}|code-block|syntax|javascript|1016435|值得一提的是，对于Tachyons.css这样的CSS库，很容易意外覆盖字体大小。|1016436|例如，class：f5等同于：fontSize:+1rem，如果您将正文字体比例保持为默认值，这就很好。|1016437|但是:如果您选择字体大小类：f6，这将等同于小屏幕上的fontSize:+.875rem。在这种情况下，您需要更具体地说明您的重置声明：|1016438|++/*+Prevent+zoom+*/
++select,+input,+textarea+{
++++font-size:+16px!important;
++}

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

/*+not+small+*/

}|1016439|entityMap^0|1|6|0|0|0|9|2|F|E|0|E|2|R|H|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|O|3|P|5|6|7|14|8|@$9|15|A|16|B|C]|$9|17|A|18|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|H|7|19|8|@]|D|@]|E|$I|J]]|$1|S|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|T|$]]

Pseudo elements like <code>:focus</code> don't work as they used to. From iOS 11, a simple reset declaration can be added before your main styles (providing you don't override them with a smaller font size).

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

It's worth mentioning that for CSS libraries such as Tachyons.css then it's easy to accidentally override your font size. 

For example class: <code>f5</code> is equivalent to: <code>fontSize: 1rem</code>, which is fine if you have kept the body font scale at the default. 

However: if you choose font size class: <code>f6</code> this will be equivalent to <code>fontSize: .875rem</code> on a small display upwards. In that instance you'll need to be more specific about your reset declarations:

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

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

/* not small */

}

</code></pre>

blocks|key|1016488|text|即使有了这些答案，我也花了三天的时间才弄清楚到底是怎么回事，将来我可能还需要这个解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016489|我的情况与所描述的略有不同。|1016490|在我的文档中，我在页面的div中有一些令人满意的文本。当用户单击不同的div时，我自动选择了contenteditable+div+(之前保存并清除的选择范围)中的一些文本，在该选择上运行富文本execCommand，然后再次清除它。|1016491|这使我能够基于用户与页面上其他地方的颜色div的交互以不可见的方式更改文本颜色，同时保持选择通常隐藏，以便让他们在适当的上下文中看到颜色。|1016492|好吧，在iPad的Safari上，点击颜色div就会弹出屏幕上的键盘，我做的任何事情都无法阻止它。|1016493|我终于明白了iPad是如何做到这一点的。|1016494|它监听触发可编辑文本选择的touchstart和touchend序列。|1016495|当这种组合发生时，它会显示屏幕上的键盘。|1016496|实际上，它在放大可编辑文本的同时，对底层页面进行了推拉缩放。我花了一天时间才明白我看到的是什么。|1016497|因此，我使用的解决方案是在这些特定的颜色div上同时拦截touchstart和touchend。在这两个处理程序中，我停止传播和冒泡并返回false。但在touchend事件中，我触发的行为与单击触发的行为相同。|1016498|所以，之前，Safari触发了我认为是"touchstart“、"mousedown”、"touchend“、"mouseup”、"click“的东西，而且由于我的代码，文本选择也是按这个顺序进行的。|1016499|由于截取的原因，新的序列就是文本选择。在Safari可以处理它并完成它的键盘操作之前，所有其他的东西都被拦截了。touchstart和touchend拦截也阻止了鼠标事件的触发，在上下文中这是完全可以的。|1016500|我不知道更简单的方式来描述这个问题，但我认为在这里有它是很重要的，因为我在第一次遇到这个问题的一个小时内就找到了这个帖子。|1016501|我有98%25的把握，同样的修复方法也适用于输入框和其他任何东西。截取触摸事件并单独处理它们，而不让它们传播或冒泡，并考虑在极小的超时后进行任何选择，以确保Safari不会将该序列识别为键盘触发器。|1016502|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|19|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1A|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1B|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1C|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1D|8|@]|9|@]|A|$]]|$1|V|3|W|5|6|7|1E|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1F|8|@]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1G|8|@]|9|@]|A|$]]|$1|11|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]]|12|$]]

Even with these answers it took me three days to figure out what was going on and I may need the solution again in the future.

My situation was slightly different from the one described.

In mine, I had some contenteditable text in a div on the page. When the user clicked on a DIFFERENT div, a button of sorts, I automatically selected some text in the contenteditable div (a selection range that had previously been saved and cleared), ran a rich text execCommand on that selection, and cleared it again.

This enabled me to invisibly change text colors based on user interactions with color divs elsewhere on the page, while keeping the selection normally hidden to let them see the colors in the proper context.

Well, on iPad's Safari, clicking the color div resulted in the on-screen keyboard coming up, and nothing I did would prevent it.

I finally figured out how the iPad's doing this.

It listens for a touchstart and touchend sequence that triggers a selection of editable text.

When that combination happens, it shows the on-screen keyboard.

Actually, it does a dolly zoom where it expands the underlying page while zooming in on the editable text. It took me a day just to understand what I was seeing.

So the solution I used was to intercept both touchstart and touchend on those particular color divs. In both handlers I stop propagation and bubbling and return false. But in the touchend event I trigger the same behavior that click triggered.

So, before, Safari was triggering what I think was "touchstart", "mousedown", "touchend", "mouseup", "click", and because of my code, a text selection, in that order.

The new sequence because of the intercepts is simply the text selection. Everything else gets intercepted before Safari can process it and do its keyboard stuff. The touchstart and touchend intercepts prevent the mouse events from triggering as well, and in context this is totally fine.

I don't know an easier way to describe this but I think it's important to have it here because I found this thread within an hour of first encountering the issue.

I'm 98% sure the same fix will work with input boxes and anything else. Intercept the touch events and process them separately without letting them propagate or bubble, and consider doing any selections after a tiny timeout just to make sure Safari doesn't recognize the sequence as the keyboard trigger.

blocks|key|1016535|text|受@jirikuchta答案的启发，我通过添加以下CSS解决了这个问题：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1016536|#myTextArea:active+{
++font-size:+16px;+/*+`16px`+is+safer+I+assume,+although+`1rem`+works+too+*/
}|code-block|syntax|javascript|1016537|没有JS，我也没有注意到任何闪光或其他东西。|1016538|值得注意的是，带有maximum-scale=1的viewport也可以工作，但当页面作为iframe加载时，或者如果您有其他修改viewport的脚本，等等，就不能工作。|offset|length|style|CODE|1016539|entityMap^0|0|0|0|9|F|P|8|1T|8|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|T|8|@$K|U|L|V|M|N]|$K|W|L|X|M|N]|$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|P|$]]

Inspired by @jirikuchta 's answer, I solved this problem by adding this bit of CSS:

<pre class="lang-css prettyprint-override"><code>#myTextArea:active {
 font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}
</code></pre>

No JS, and I don't notice any flash or anything.

It's worth noting that a <code>viewport</code> with <code>maximum-scale=1</code> also works, but not when the page is loaded as an iframe, or if you have some other script modifying the <code>viewport</code>, etc.

blocks|key|1016583|text|令人惊讶的是，这里有几十个关于javascript和视窗的答案，只有一个提到了text-size-adjust，这是我认为最好的解决方案。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1016584|您可以将其设置为none。|1016585|添加以下CSS：|1016586|*+{
+-webkit-text-size-adjust:+none;
++text-size-adjust:+none;
}|code-block|syntax|javascript|1016587|entityMap^0|13|G|0|8|4|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

Amazing, there are dozens of answers here with javascript and viewports, and only one other mentions <code>text-size-adjust</code> which is what I believe is the best solution.
You can just set this to <code>none</code>.
Add the following CSS:
<pre><code>* {
 -webkit-text-size-adjust: none;
 text-size-adjust: none;
}
</code></pre>

blocks|key|1231337|text|这对我在iOS+Safari和Chrome浏览器上都很有效。对于输入选择器，可以设置类或id来包含当前的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1231338|@supports+(-webkit-overflow-scrolling:+touch)+{
+++input+{
+++++font-size:+16px;
+++}
}|code-block|syntax|javascript|1231339|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This worked for me on iOS Safari and Chrome. For the input selector could be set the class or id to enclose the current.
<pre><code>@supports (-webkit-overflow-scrolling: touch) {
 input {
 font-size: 16px;
 }
}
</code></pre>

I made an HTML page that has an <code>&lt;input&gt;</code> tag with <code>type="text"</code>. When I click on it using Safari on iPhone, the page becomes larger (auto zoom). Does anybody know how to disable this?

Disable Auto Zoom in Input "Text" tag - Safari on iPhone

容器

jQuery

我制作了一个带有type="text"的<input>标记的HTML页面。当我在iPhone上使用Safari点击它时，页面变得更大(自动缩放)。有谁知道怎么禁用它吗？

问在iPhone上禁用自动缩放输入"Text“标签
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在iPhone上禁用自动缩放输入"Text“标签EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在iPhone上禁用自动缩放输入"Text“标签
EN