js获取页面缩放比例

今天在网上看到一位大神写的一篇文章，出处记不得了，只是因为我在做项目的时候需要用到所以看了一眼。

经理要求我把两张图表上下排列（非响应式的）改成可以适配浏览器的，刚开始只是想改样式，看到代码才发现原来他是写在jq里面的，尝试这用jq该样式的时候发现这个canvas是后渲染根本没有什么用处，搞了半天没有用修改样式的方法搞，最用才想到js监测浏览器页面的缩放可以在生产canvas的时候动态修改height于是就百度了一下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，有缩放的话会大于或者小于100.

写这篇博客主要是为了方便自己记忆，交流学习。