今天在網上看到一位大神寫的一篇文章，出處記不得了，只是因為我在做專案的時候需要用到所以看了一眼。
經理要求我把兩張圖表上下排列（非響應式的）改成可以適配瀏覽器的，剛開始只是想改樣式，看到程式碼才發現原來他是寫在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.
寫這篇部落格主要是為了方便自己記憶，交流學習。