jQuery 在我的移动站点上禁用输入标签的自动缩放/字段缩放 - 无需禁用所有缩放功能
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5111964/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable auto zoom/field zoom on input tags on my Mobile Site - WITHOUT disabling all zoom capabilities
提问by John Rakowski
I have spent all day looking for a solution, and this site keeps coming up, SO why not ask you guys.
我花了一整天的时间寻找解决方案，这个网站不断出现，所以为什么不问问你们。
I an building our companies mobile website and we want to disable the auto zoom mobile devices use to zoom into text/search/email inputs when they are focused on.
I am building the site in HTML5 and have seen/tested the
<meta name="viewport" content="width=device-width, user-scalable=no" />solution. With various properties (ie. minimum-scale=#, maximum-scale=#" )
This, works in almost ALL mobile devices I am testing on. Only one problem. I want the user to be able to zoom in/out at their leisure. (we have some higher res product shots that would be nice to see up close)
我正在构建我们公司的移动网站，我们希望禁用自动缩放移动设备在聚焦时用于放大文本/搜索/电子邮件输入。我正在用 HTML5 构建站点，并且已经看到/测试了该
<meta name="viewport" content="width=device-width, user-scalable=no" />解决方案。具有各种属性（即 minimum-scale= #, maximum-scale=#" ）这几乎适用于我正在测试的所有移动设备。只有一个问题。我希望用户能够放大/缩小他们的休闲。（我们有一些更高分辨率的产品照片，很高兴近距离观看）
How can I disable zooming in when clicking on input tags, while retaining full manual user zoom control?
单击输入标签时如何禁用放大，同时保留完全手动用户缩放控制？
p.s the site also uses jQuery. So any thoughts using that might help.
ps 该站点也使用 jQuery。所以任何使用它的想法可能会有所帮助。
thank you Jrak
谢谢你
回答by Scott
Setting the meta tag in the <head>like this worked for me:
<head>像这样设置元标记对我有用：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
回答by AllanKH
It may not work exactly for your styling, but if you set the font-size of input elements to be 16px or above, the onfocus zooming will stop.
它可能不完全适合您的样式，但是如果您将输入元素的字体大小设置为 16px 或更高，则聚焦缩放将停止。
回答by dlo
See: Disable Auto Zoom in Input "Text" tag - Safari on iPhone
请参阅：在输入“文本”标签中禁用自动缩放 - iPhone 上的 Safari
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.
1) 我注意到 mouseover 事件发生在缩放之前，但缩放发生在 mousedown 或 focus 事件之前。
2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)
2) 您可以使用 javascript 动态更改 META 视口标签（请参阅使用 Javascript在 iPhone Safari 上启用/禁用缩放？）
So, try this (shown in jquery for compactness):
所以，试试这个（在 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" />');
}
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.
这绝对是一个黑客......可能存在鼠标悬停/向下并不总是捕获条目/退出的情况，但它在我的测试中运行良好并且是一个可靠的开始。
回答by Stephen Walsh
It took me a while to find it but here's the best code that I found......http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/
我花了一段时间才找到它，但这是我找到的最好的代码...... 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));
});
回答by Steele Rocky
a very simple hack is to set:
一个非常简单的技巧是设置：
input, textarea {font-size:16px;}
回答by jazzdev
If you set a webkit transform to any value other than 1 (or 1.0) then auto-zoom on selecting an input tag is disabled on iPhone.
如果您将 webkit 转换设置为 1（或 1.0）以外的任何值，则在 iPhone 上禁用选择输入标签时的自动缩放。
document.body.style.webkitTransformOrigin= "0% 0%";
document.body.style.webkitTransform = "scale(1.1)";
I haven't tested other mobile browsers.
我还没有测试过其他移动浏览器。
