JS代碼查看瀏覽器頁面放大比例

在做前端項目的時候會遇到這樣的問題，比如說我適配的 1920*1080 100% 縮放比例，在這種情況下頁面的布局展示都是OK的，但是如果用戶自行修改縮放比例，那么這個頁面可能會出現一些小的問題，比如錯版和展示不開顯示滾動條的問題，所以說我們可以在最開始的時候來使用JS代碼檢測一下用戶有沒有采用100%的比例展示頁面，如果進行了縮放，檢測縮放的比例是多少，可以提醒用戶使用100%的縮放比例體驗最好的頁面效果。

主要的就是一段簡單的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;
};
let result = detectZoom()
// 打印用戶的縮放比例
console.log(result);

以上代碼就是檢測用戶電腦縮放比例的代碼，如果打印輸出為100，則表示用戶使用100%的縮放展示，表示用戶沒有進行縮放操作，如果現實125，則表示用戶采用了125%的比例放大了現實效果。windows系統默認推薦采用125%的比例放大現實，所以算是個坑吧。

總結

以上是生活随笔為你收集整理的JS代码查看浏览器页面放大比例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。