JavaScript方法获取屏幕缩放比例与分辨率

最新推荐文章于 2024-04-29 10:17:49 发布

Jave2108

最新推荐文章于 2024-04-29 10:17:49 发布

阅读量9.4k

点赞数 1

分类专栏： JavaScript VUE CSS 文章标签：大数据 javascript vue.js 前端框架

本文链接：https://blog.csdn.net/JaveWong/article/details/125802444

版权

JavaScript 同时被 3 个专栏收录

29 篇文章 1 订阅

订阅专栏

VUE

21 篇文章 4 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

我们在开发一些前端页面的时候，会考虑到一些设备屏幕的兼容性问题，这个时候需要根据屏幕的分辨率以及缩放比例来进行实时的宽高设定，所以我总结了用JavaScript方法进行获取用户电脑屏幕的分辨率和缩放比例的数据：

获取屏幕缩放比例

//获取屏幕缩放比例
function getRatio()
{
    var ratio=0;
    var screen=window.screen;
    var 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;
}

获取分辨率

   屏幕分辨率的高：window.screen.height*getRatio()/100   //乘以缩放比例为真实的像素
   屏幕分辨率的宽：window.screen.width*getRatio()/100    //乘以缩放比例为真实的像素
   屏幕可用工作区高度：window.screen.availHeight;    
   屏幕可用工作区宽度：window.screen.availWidth;