这一次给大家带来的是如何在浏览器缩放的情况下,而且很大一部分情况是用户在不知情的情况下的缩放,如何友好的提示用户,页面被缩放了。

不同浏览器的缩放检测

由于浏览器的兼容性,不同的浏览器需要不同的检测方法来检测是否被缩放,下面就是不同浏览器的检测方法

IE7

在 IE7 下面,是通过 getBoundingClientRect() 这个方法来获取页面的绝对宽度,然后除以页面在缩放后的宽度就是缩放比了。

var ie7 = function () {
    var rect = document.body.getBoundingClientRect(),
    zoom = (rect.right - rect.left) / document.body.offsetWidth;        
    zoom = Math.round(zoom * 100) / 100;
    return {
        zoom: zoom,
        devicePxPerCssPx: zoom * devicePixelRatio()
    };
};
IE8+

在 IE8 以后,IE 浏览器支持 screen.deviceXDPIscreen.logicalXDPI 的方法,分别从方法名就能看出,是分别检测设备 DPI 的,然后同样是两个 DPI 做比。

Webkit

在 Webkit 上面,同样是通过检测页面宽度和绝对宽度,来做比的,和IE7 是异曲同工,但是在移动端的上面涉及到要判断设备是否横屏的问题

var webkit = function () {
    var zoom = window.outerWidth / window.innerWidth;
    zoom = Math.round(zoom * 100) / 100;

    return {
        zoom: zoom,
        devicePxPerCssPx: zoom * devicePixelRatio()
    };
};
Opera

Opera 浏览器在检测上面和 Webkit 用的同一种方法,也是检测页面宽度比。

Firefox

Firefox 浏览器主要就是使用 Media Query 模拟探测,但是有一个问题就是无法区分是 Retina 屏幕的二倍,还是真正的缩放了二倍

代码是 Fork GitHub 上面别人的代码,做了适当更改,项目地址:detect-zoom.