Question

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

我正在建立我们公司的移动网站，我们希望禁用自动缩放移动设备用于在他们关注时放大文本/搜索/电子邮件输入。我正在HTML5中构建网站并已经看过/测试过 <meta name="viewport" content="width=device-width, user-scalable=no" /> 解。具有各种属性（即最小比例= ＃，最大比例= ＃“）这适用于我正在测试的几乎所有移动设备。只有一个问题。我希望用户能够在闲暇时放大/缩小。（我们有一些更高分辨率的产品镜头，很高兴能近距离观看）

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

该网站也使用jQuery。因此，使用它的任何想法都可能有所帮助。

谢谢你 Jrak

Answer 1

在<head>中设置元标记对我来说很有用：

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

Answer 2

它可能无法完全用于您的样式，但如果您将输入元素的字体大小设置为16px或更高，则onfocus缩放将停止。

Answer 3

请参阅：Disable Auto Zoom in Input "Text" tag - Safari on iPhone

我找不到干净的方式，但这是一个黑客......

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

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" />');
}

这绝对是一个黑客......可能会出现鼠标悬停/下移并不总是捕获进入/退出的情况，但它在我的测试中运行良好并且是一个可靠的开始。

Answer 4

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

一个非常简单的黑客就是设置：

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

Answer 6

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

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

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

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

6 个答案: