JavaScript - 防止页面缩放

Question

JavaScript - 防止页面缩放

javascripthtmlzooming

6

我有一个将在平板电脑（使用Internet Explorer）上使用的Web应用程序。编辑：不是平板电脑，而是带有触摸屏幕的Windows 7计算机。 问题在于用户可以像ctrl-+一样在页面上捏合缩放。

是否有一种方法可以通过JavaScript禁用它？（就像在移动设备上一样）。

或者改变User Agent以像iPad一样操作？这样会有效吗？

- Gab

为什么不直接使用<meta name="viewport" content="maximum-scale=1">？请参考https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html。 - j08691

2

你尝试过使用媒体查询吗？<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> - Narek Mamikonyan

可能是使用Javascript/Jquery禁用桌面Web浏览器页面缩放的重复问题。 - dammkewl

@NarekMamikonyan：那不是媒体查询，那只是一个视口元标记。 - CBroe

“或者将用户代理更改为像iPad一样的操作方式？这样会有效吗？”- 更改用户代理不会使浏览器本身有任何不同的行为... - CBroe

@CBroe 是的，你说得对，我搞砸了。 - Narek Mamikonyan

2个回答

4

您可以通过此代码使用Ctrl键+鼠标滚轮向上或向下，或通过Ctrl+或Ctrl-来禁用浏览器中的缩放功能。

$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {
        event.preventDefault();
     }
    // 107 Num Key  +
    // 109 Num Key  -
    // 173 Min Key  hyphen/underscor Hey
    // 61 Plus key  +/= key
});

$(window).bind('mousewheel DOMMouseScroll', function (event) {
       if (event.ctrlKey == true) {
       event.preventDefault();
       }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
teste

- Felipe Guimaraes

如何仅使用JS而不是Jquery来实现此操作？ - Ini

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- morkro · Accepted Answer

使用

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

在您的文档的<head>部分中，添加以下内容可以防止在移动设备上缩放网站。重要的是user-scalable=no这个设置会起到作用。编辑进行了更多的研究，您还可以选择添加以下选项：

<meta name="MobileOptimized" content="640">

content="640"是您想要设置的宽度，并且其行为类似于<meta name="viewport" content="width=640,user-scalable=no">。有关更多信息，请在此处和在此处阅读相关内容。