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