在我的移动网站上的输入标签上禁用自动缩放/字段缩放 - 而不禁用所有缩放功能

Question

我花了一整天的时间寻找解决方案，这个网站不断出现，所以为什么不问问你们呢。

我正在构建我们公司的移动网站，我们希望禁用移动设备在聚焦时用于放大文本/搜索/电子邮件输入的自动缩放功能。 我正在 HTML5 中构建网站，并且已经看到/测试了 解决方案。具有各种属性（即，minimum-scale=#、maximum-scale=#"） 这适用于我正在测试的几乎所有移动设备。只有一个问题。我希望用户能够在闲暇时放大/缩小。 （我们有一些更高分辨率的产品照片，很高兴能近距离观看）

如何在单击输入标签时禁用放大，同时保留完整的手动用户缩放控制？

ps 该网站还使用 jQuery。所以任何使用它的想法都可能有所帮助。

谢谢 杰拉克

Answer 1

如果将 webkit 转换设置为 1（或 1.0）以外的任何值
然后，iPhone 上会禁用选择输入标签时的自动缩放功能。

document.body.style.webkitTransformOrigin= "0% 0%";
document.body.style.webkitTransform = "scale(1.1)";

我没有测试过其他移动浏览器。

Answer 2

像这样在 中设置元标记对我有用：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

Answer 3

它可能不完全适合您的样式，但如果您将输入元素的字体大小设置为 16px 或以上，onfocus 缩放将停止。

Answer 4

请参阅：禁用输入中的自动缩放“ Text”标签 - iPhone 上的 Safari

我找不到干净的方法，但这里有一个技巧...

1）我注意到鼠标悬停事件发生在缩放之前，但缩放发生在鼠标按下或焦点事件之前。

2）您可以使用javascript动态更改META视口标签（请参阅使用 Javascript 在 iPhone 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" />');
}

这绝对是一个 hack...可能存在鼠标悬停/向下并不总是捕获的情况进入/退出，但它在我的测试中运行良好，并且是一个坚实的开始。

Answer 5

我花了一段时间才找到它，但这是我找到的最好的代码......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));
});

Answer 6

一个非常简单的技巧是设置：

input, textarea {font-size:16px;}