這里所說(shuō)的縮放不是指瀏覽器大小的縮放，而是指瀏覽器網(wǎng)頁(yè)內(nèi)容的百分比縮放（按Ctrl和+號(hào)鍵或者-號(hào)鍵的縮放）。
檢測(cè)這種縮放有很種方法，QQ空間都通過(guò)flash來(lái)檢測(cè)瀏覽器是否處于縮放。這里提供javascript的方法來(lái)檢測(cè)瀏覽器的縮放。
對(duì)于 IE6，就直接無(wú)視了，因?yàn)?IE6 只能對(duì)文本進(jìn)行縮放。
先來(lái)說(shuō)說(shuō)瀏覽器提供的標(biāo)準(zhǔn)檢測(cè)接口，window.devicePixelRatio 是設(shè)備上物理像素和設(shè)備獨(dú)立像素的比例，該屬性就可以用于檢測(cè)網(wǎng)頁(yè)是否被縮放了。在普通的 PC 瀏覽器上，在默認(rèn)無(wú)縮放的情況下其默認(rèn)值是 1。目前Firefox、chrome等都得到了很好的支持。
好吧，接下來(lái)該說(shuō)說(shuō) IE 的處理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 兩個(gè)屬性，deviceXDPI 就是對(duì)應(yīng)的設(shè)備上的物理像素，而 logicalXDPI 就是對(duì)應(yīng)了設(shè)備獨(dú)立像素的比例。估計(jì)標(biāo)準(zhǔn)的檢測(cè)接口也只是基于 IE 這種方法的一種改進(jìn)。這兩個(gè)屬性在 windows XP+ 以上的系統(tǒng)上的默認(rèn)值都是 96，因?yàn)橄到y(tǒng)默認(rèn)的就是 96dpi 。
對(duì)于以上兩種都不支持的瀏覽器，還可以利用window.outerWidth 和 window.innerWidth 這兩個(gè)屬性。outerWidth 返回的是窗口元素的外部實(shí)際寬度，innerWidth 返回的是窗口元素的內(nèi)部實(shí)際寬度，這兩個(gè)寬度都包含了滾動(dòng)條在內(nèi)的寬度。
有了這些屬性基本就可以搞定 PC 瀏覽器上常見(jiàn)的瀏覽器了。實(shí)現(xiàn)代碼如下：
detectZoom 函數(shù)的返回值如果是 100 就是默認(rèn)縮放級(jí)別，大于 100 則是放大了，小于 100 則是縮小了。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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)載請(qǐng)注明： 轉(zhuǎn)載自前端開(kāi)發(fā)
