Question

js怎么禁止浏览器窗口缩放？

如题，我用clientWidth和clientHeight获得浏览器窗口的可视大小，我的需求是当clientWidth小于1000时，禁止浏览器窗口缩放

其实就是想问，有木有js代码可以禁止浏览器缩放

可能我没说清楚，我并不是想要禁止网页缩放，而是想要禁止浏览器本身缩放，也就是说拖动浏览器边角缩放的那种，我做的是液态全屏，网页是根据浏览器的窗口大小缩放的，当浏览器的窗口宽度小于1000时，想禁止窗口的缩放

Answer 1

简单的回答是：不能

从用户角度讲，这是他们应有的权利，它属于操作系统中应用软件的一部分，并不属于页面，你没有办法禁止用户对窗口进行缩放。

有一个办法可以保证页面总是保持在你想要的尺寸：resizeTo

IE 和 Safari 暂时还都支持在当前页面使用 resizeTo，其它浏览器都已经改为只支持在 window.open 打开的页面上使用。所以要兼容全部浏览器，你的页面必须使用 window.open 打开，并且在部分浏览器中要设置 width 和 height 属性（否则窗口会在 TAB 中打开）。

index.html

<script type="text/javascript">
/* 或者在适当的情况使用 a onclick 调用 window.open */
window.open("w.html", "", "top=0,left=0,toolbar=1,menubar=1,"
    + "width=" + screen.width + ",height=" + screen.height);
</script>

main.html

<script type="text/javascript">
window.onresize = function() {
    var window_width = window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;
                                  
    if(window_width < 1000) {
        // 部分浏览器需要延迟
        setTimeout(function() {
            // 窗口最大化
            window.resizeTo(screen.width, screen.height);
            // 窗口移动至 top=0, left=0
            window.moveTo(0, 0);
        }, 100);
    }
};
</script>

注意即使在 window.open 和 window.resizeTo 中使用了 screen.width 和 screen.height，但打开的窗口并不是我们平时看到的最大化，窗口离屏幕四周会有一定距离。

使用这种方法最大的问题就是会令访问者产生反感，因为你强迫用户使用指定尺寸的窗口大小。但这也是现在唯一的方法。

所以个人还是建议你当窗口过小的时候，mask 掉整个页面，给用户一个提示，例如：您的浏览器窗口尺寸过小，为了正常访问此页面，请调整窗口尺寸。

Answer 2

不能禁止浏览器窗口的缩放。
在网页设计开发中有一个忌讳，就是不要试图控制浏览器的行为。
窗口的缩放属于用户控制浏览器，是浏览器的行为，不是页面的行为，从控制权限上来讲，你这个想法是越权操作。
你能做的是禁止页面内容缩放，一般是用在移动端。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
只要在头部加上这个，可以禁止用户缩放网页

Answer 3

document.addEventListener('keydown', function (event) {
if ((event.ctrlKey === true || event.metaKey === true)
&& (event.which === 61 || event.which === 107
|| event.which === 173 || event.which === 109
|| event.which === 187 || event.which === 189)){
event.preventDefault();
}
}, false);
document.addEventListener('DOMMouseScroll', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, false);

document.addEventListener('mousewheel', function (event) {
if (event.ctrlKey === true || event.metaKey) {
event.preventDefault();
}
}, false);

document.addEventListener('mousewheel', function (e) {
e = e || window.event;
if ((e.wheelDelta && event.ctrlKey) || e.detail) {
event.preventDefault();
}
}, {
capture: false,
passive: false
});

Answer 4

不知道你缩放的目的是什么？为手持设备优化吗？

追问

可能我没说清楚，我并不是想要禁止网页缩放，而是想要禁止浏览器本身缩放，也就是说拖动浏览器边角缩放的那种，我做的是液态全屏，网页是根据浏览器的窗口大小缩放的，当浏览器的窗口宽度小于1000时，想禁止窗口的缩放