在我的移动站点上禁用自动缩放/字段缩放输入标签-而不禁用所有缩放功能
我花了一整天寻找一个解决方案，这个网站不断出现，所以为什么不问问你们。
我是一个建设我们的公司移动网站，我们希望禁用自动缩放移动设备用于放大文本/搜索/电子邮件输入时，他们是关注的。我正在用HTML5构建站点，并且已经看到/测试了<meta name="viewport" content="width=device-width, user-scalable=no" />解决方案。具有各种性质(如“最小比例尺=#，最大比例尺=#”)这在我测试的几乎所有移动设备上都有效。只有一个问题。我希望用户能够在闲暇时放大/缩小。(我们有一些高分辨率的产品照片，可以很好地近距离查看)。
如何在单击输入标签时禁用缩放，同时保留完全手动用户缩放控制？
该网站还使用jQuery。所以任何使用它的想法都可能有帮助。
谢谢Jrak
回答 6
Stack Overflow用户
发布于 2012-05-30 20:12:10
像这样在<head>中设置元标记对我有用：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">Stack Overflow用户
发布于 2013-09-22 23:14:12
它可能不完全适用于您的样式，但如果您将输入元素的字体大小设置为16 of或以上，则焦点缩放将停止。
Stack Overflow用户
发布于 2011-03-04 16:55:45
请参阅：Disable Auto Zoom in Input "Text" tag - Safari on iPhone
我找不到干净的方法，但这里有个黑客.
1)我注意到鼠标切换事件发生在缩放之前，但缩放发生在鼠标向下或焦点事件之前。
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" />');
}这绝对是个黑客..。在某些情况下，mouseover/down并不总是捕获入口/出口，但它在我的测试中运行良好，是一个坚实的开端。
https://stackoverflow.com/questions/5111964
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号