javascript檢測瀏覽器的縮放狀態(tài)實現(xiàn)代碼
這里所說的縮放不是指瀏覽器大小的縮放,而是指瀏覽器網(wǎng)頁內(nèi)容的百分比縮放(按Ctrl和+號鍵或者-號鍵的縮放)。
檢測這種縮放有很種方法,QQ空間都通過flash來檢測瀏覽器是否處于縮放。這里提供javascript的方法來檢測瀏覽器的縮放。
對于 IE6,就直接無視了,因為 IE6 只能對文本進(jìn)行縮放。
先來說說瀏覽器提供的標(biāo)準(zhǔn)檢測接口,window.devicePixelRatio 是設(shè)備上物理像素和設(shè)備獨立像素的比例,該屬性就可以用于檢測網(wǎng)頁是否被縮放了。在普通的 PC 瀏覽器上,在默認(rèn)無縮放的情況下其默認(rèn)值是 1。目前Firefox、chrome等都得到了很好的支持。
好吧,接下來該說說 IE 的處理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 兩個屬性,deviceXDPI 就是對應(yīng)的設(shè)備上的物理像素,而 logicalXDPI 就是對應(yīng)了設(shè)備獨立像素的比例。估計標(biāo)準(zhǔn)的檢測接口也只是基于 IE 這種方法的一種改進(jìn)。這兩個屬性在 windows XP+ 以上的系統(tǒng)上的默認(rèn)值都是 96,因為系統(tǒng)默認(rèn)的就是 96dpi 。
對于以上兩種都不支持的瀏覽器,還可以利用window.outerWidth 和 window.innerWidth 這兩個屬性。outerWidth 返回的是窗口元素的外部實際寬度,innerWidth 返回的是窗口元素的內(nèi)部實際寬度,這兩個寬度都包含了滾動條在內(nèi)的寬度。
有了這些屬性基本就可以搞定 PC 瀏覽器上常見的瀏覽器了。實現(xiàn)代碼如下:
detectZoom 函數(shù)的返回值如果是 100 就是默認(rèn)縮放級別,大于 100 則是放大了,小于 100 則是縮小了。
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; };
原創(chuàng)文章,轉(zhuǎn)載請注明: 轉(zhuǎn)載自前端開發(fā)
相關(guān)文章
kindeditor修復(fù)會替換script內(nèi)容的問題
這里給大家分享的是個人修改的kindeditor的代碼,主要是修復(fù)了一些BUG,添加了些常用功能,推薦給大家,有需要的小伙伴可以參考下。2015-04-04JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法
這篇文章主要介紹了JavaScript數(shù)組對象實現(xiàn)增加一個返回隨機元素的方法,涉及javascript針對數(shù)組及隨機數(shù)的相關(guān)操作技巧,需要的朋友可以參考下2015-07-07echarts實現(xiàn)橫向和縱向滾動條(使用dataZoom)
這篇文章主要給大家介紹了關(guān)于echarts使用dataZoom實現(xiàn)橫向和縱向滾動條的相關(guān)資料,最近項目中使用到echarts圖表,當(dāng)數(shù)據(jù)過多時需要添加橫向滾動條,需要的朋友可以參考下2023-08-08js arguments,jcallee caller用法總結(jié)
這篇文章主要介紹了js中arguments, jcallee caller用法。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11