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

  • 相关阅读:
    flash中网页跳转总结
    as3自定义事件
    mouseChildren启示
    flash拖动条移出flash无法拖动
    需要一个策略文件,但在加载此媒体时未设置checkPolicyFile标志
    Teach Yourself SQL in 10 Minutes
    电子书本地转换软件 Calibre
    Teach Yourself SQL in 10 Minutes
    Teach Yourself SQL in 10 Minutes
    Teach Yourself SQL in 10 Minutes – Page 31 练习
  • 原文地址:https://www.cnblogs.com/wjw1014/p/13564108.html
Copyright © 2011-2022 走看看