js检测浏览器是否缩放并获取缩放比例的方法

有些网站的访客因为显示器的原因为达到比较好的视觉效果，会对浏览器中的网页进行缩放操作。注意，这里的缩放并不是操作系统的缩放，而是浏览器使用快捷键( 按Ctrl和+号键或者-号键的缩放)或按住 ctrl 键和鼠标滚轮进行的网页缩放。

为了使用网页达到最的视觉效果，制作网页时需要对访客进行提醒，以避免用户缩放网页过大或过小js 浏览器最小化事件，对网页的排版造成混乱！

js 检测浏览器是否缩放的代码

示例代码：

var ratio = 0;
var screen = window.screen;
var ua = navigator.userAgent.toLowerCase();
if (window.devicePixelRatio !== undefined) {
    ratio = window.devicePixelRatio;
} else if (~ua.indexOf('msie')) {
    if (screen.deviceXDPI && screen.logicalXDPI) { //IE
        ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
} else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
}
if(ratio == 1){ 
    console.log('网页正常大小！');
} else if(ratio > 1){
    console.log('网页被放大！');
}else{
    console.log('网页被缩小！');
}

代码理解

1、浏览器的标准检测接口，window.devicePixelRatio 是设备上物理像素和设备独立像素的比例，该属性可以用于检测网页是否被缩放了。

2、在PC的浏览器上js 浏览器最小化事件，window.devicePixelRatio 在无缩放的情况下的值为1，小于1则为缩小状态，大于1则为放大状态！

3、IE浏览器提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 两个属性，deviceXDPI 就是对应的设备上的物理像素，而 logicalXDPI 就是对应了设备独立像素的比例。

4、对于上面两种接口都不支持的浏览器，可以使用 window.outerWidth 和 window.innerWidth 这两个属性。

js 检测浏览器是否缩放并返回缩放的比例

js自定义一个函数

function detectZoom() {
    var ratio = 0,   screen = window.screen, ua = navigator.userAgent.toLowerCase();
    if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    } else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
        }
    } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
    }
    if (ratio) {
        ratio = Math.round(ratio * 100);
    }
    return ratio;
};

调用函数：

//如果值为 100，则为正常大小
console.log(detectZoom());