在我的移动站点上禁用输入标签的自动缩放/字段缩放 - 不禁用所有缩放功能
Posted
技术标签:
【中文标题】在我的移动站点上禁用输入标签的自动缩放/字段缩放 - 不禁用所有缩放功能【英文标题】：Disable auto zoom/field zoom on input tags on my Mobile Site - WITHOUT disabling all zoom capabilities 【发布时间】：2011-07-03 23:23:44 【问题描述】：我整天都在寻找解决方案，而且这个网站不断出现，所以为什么不问问你们。
我正在构建我们公司的移动网站，我们希望禁用自动缩放移动设备用于在关注时放大文本/搜索/电子邮件输入。
我正在用 html5 构建网站，并且已经看到/测试了
<meta name="viewport" content="width=device-width, user-scalable=no" />
解决方案。具有各种属性（即 minimum-scale=#, maximum-scale=#" ）
这适用于我正在测试的几乎所有移动设备。只有一个问题。我希望用户能够在闲暇时放大/缩小。 （我们有一些更高分辨率的产品照片，可以近距离观看）
如何在单击输入标签时禁用放大，同时保留完全的手动用户缩放控制？
p.s 该网站也使用 jQuery。因此，任何使用它的想法都可能有所帮助。
谢谢你 杰拉克
【问题讨论】：
【参考方案1】：一个非常简单的技巧是设置：
input, textarea font-size:16px;
【讨论】：
这是做什么的？ @evolutionxbox 它将所选元素的字体设置为 iPhone 的默认字体，并停止输入字段以缩放以适应屏幕。【参考方案2】：我花了一段时间才找到它，但这是我找到的最好的代码......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));
);
【讨论】：
【参考方案3】：它可能不完全适合您的样式，但如果您将输入元素的 font-size 设置为 16px 或以上，onfocus 缩放将停止。
【讨论】：
这太棒了。谢谢！【参考方案4】：像这样在<head> 中设置元标记对我有用：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
【讨论】：
用户可以强制放大移动 chrome 选项，在这种情况下这不会做任何事情.. 这确实解决了文本输入聚焦时的自动缩放问题，但不允许放大图片。整个网站无法缩放。 这会破坏设备的缩放能力【参考方案5】：如果您将 webkit 转换设置为 1（或 1.0）以外的任何值 然后在 iPhone 上禁用选择输入标签时的自动缩放。
document.body.style.webkitTransformOrigin= "0% 0%";
document.body.style.webkitTransform = "scale(1.1)";
我还没有测试过其他移动浏览器。
【讨论】：
【参考方案6】：见：Disable Auto Zoom in Input "Text" tag - Safari on iPhone
我找不到干净的方法，但这里有一个 hack...
1) 我注意到 mouseover 事件发生在缩放之前，但缩放发生在 mousedown 或 focus 事件之前。
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" />');
这绝对是一个 hack……在某些情况下，鼠标悬停/向下并不总是捕捉到条目/退出，但它在我的测试中运行良好，并且是一个可靠的开始。
【讨论】：
恐怕不能在 android 上运行。此外，如果用户通过键盘上的“下一步”按钮选择表单中的下一个输入，即使在 iOS 上也不会使用鼠标悬停来捕捉输入的焦点吗？ （我假设 iOS 有这个功能？）以上是关于在我的移动站点上禁用输入标签的自动缩放/字段缩放 - 不禁用所有缩放功能的主要内容，如果未能解决你的问题，请参考以下文章