js檢測瀏覽器內容縮放效果程式碼例項

admin發表於2017-03-29
JS瀏覽器

首先強調一點，這裡所謂的瀏覽器內容縮放不是調整瀏覽器視窗的大小。

而是調整網頁內容的大小，比如按住ctrl鍵，然後滾動滑鼠中鍵出現的效果。

實現檢測的方式多種多樣，本章介紹一下如何利用javascript實現此功能，對於IE6瀏覽器來說，本章節就忽略不計了，因為它的縮放只是對文字大小的縮放，其他的沒有效果。

一.在標準瀏覽器中:

使用window.devicePixelRatio即可返回裝置的物理畫素和獨立畫素的比例。

該屬性的返回值可以檢測網頁是否進行了縮放。

在通常的pc瀏覽器的預設狀態下，預設值是1。

瀏覽器相容:

谷歌瀏覽器支援此屬性。

火狐瀏覽器支援此屬性。

IE11和IE11以上瀏覽器支援此屬性。

二.低版本的IE瀏覽器:

在IE10和IE10以下的瀏覽器中，並不支援window.devicePixelRatio屬性。

但是提供了window.screen.deviceXDPI和window.screen.logicalXDPI屬性，deviceXDPI就是對應的裝置上的物理畫素，而logicalXDPI是對應了裝置獨立畫素的比例。這兩個屬性在windows XP+ 以上的系統上的預設值都是 96，因為系統預設的就是96dpi。對於以上兩種都不支援的瀏覽器，還可以利用window.outerWidth和 window.innerWidth這兩個屬性。outerWidth 返回的是視窗元素的外部實際寬度，innerWidth 返回的是視窗元素的內部實際寬度，這兩個寬度都包含了滾動條在內的寬度。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<title>無標題文件</title>
<script type="text/javascript">
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;
      alert(ratio)
    }
  }
  else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
  }
    
  if (ratio){
    ratio = Math.round(ratio * 100);
  }
    
   return ratio;
};
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    alert(detectZoom());
  }
}
</script>
</head>
<body>
<div>按住ctrl鍵，然後滾動滑鼠中鍵就可以進行縮放。</div>
<input type="button" id="bt" value="檢視效果"/>
</body>
</html>

裝置獨立畫素可以理解為網頁的css畫素，具體可以參閱裝置畫素和css畫素畫素簡單介紹一章節。

相關文章