zoukankan      html  css  js  c++  java
  • JS代码查看浏览器页面放大比例

    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%的比例放大现实,所以算是个坑吧。

  • 相关阅读:
    集合 Subset Sums
    resin config 中文(resin.xml)
    resin4 简单学习
    什么是敏捷软件测试
    10个热门IT证书
    LoadRunner监控Linux服务器
    Agile 敏捷开发
    戴明PDCA方法
    【转】什么是内存泄露? 内存泄露检测工具
    LoadRunner常见问题
  • 原文地址:https://www.cnblogs.com/wjw1014/p/13564108.html
Copyright © 2011-2022 走看看