首页 > 编程语言 >JavaScript方法获取屏幕缩放比例与分辨率

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

时间:2023-04-26 10:14:38浏览次数:36  
标签:ratio 缩放 screen JavaScript window 屏幕 分辨率

我们在开发一些前端页面的时候,会考虑到一些设备屏幕的兼容性问题,这个时候需要根据屏幕的分辨率以及缩放比例来进行实时的宽高设定,所以我总结了用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;

 

 

标签:ratio,缩放,screen,JavaScript,window,屏幕,分辨率
From: https://www.cnblogs.com/youmingkuang/p/17354789.html

相关文章

  • JavaScript设计模式
    JavaScript设计模式设计模式概念经过代码设计经验总结之后设计出的一种固定解决问题的方式设计模式作用代码复用保证代码可靠性将编程工程化更易被他人理解设计模式的分类(W3C平台)构造器模式,模块化模式,暴露模块模式,单例模式,中介者模式,原型模式,命令模式,外......
  • javascript import maps 特性现已被全部主流浏览器支持
    值得庆祝Importmaps特性现在可以在全部三个主要浏览器内使用现在主流现代web应用引入和利用javascript是通过Esmodule模块实现。在开发javascript上,比起无模块化功能的旧版浏览器,现代浏览器支持模块化且提供了许多好用的功能引入esmodule使用<scripttype=“impor......
  • 在JavaScript的if判断中,关于数组Array的相关思考
    结论:在if判断中,无法直接使用Array转Boolean的方法判断数组是否为空数组letarray=[];//中间进行N步操作之后//...if(array){ console.log("数组为空数组");}if(array==[]){ console.log("数组为空数组");}if(array==0){ console.log("数组为空数组");}if(array......
  • JavaScript回调函数
    一种场景js需要等待一个函数执行完后再执行另一个函数或者其他的操作。本编以最简单的例子来说明回调函数的执行过程。回调函数备注上就是以函数对象作为参数进行传递。demo<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>......
  • JavaScript 正则表达式
    基本使用 //定义正则表达式 constreg=/^\d{4}-\d{1,2}-\d{1,2}$/; conststr="2020-11-11"; //验证字符串是否符合规则 reg.test(str);元字符^表示开始部分等于xxx$表示结束部分等于xxx[]表示字符串中存在中括号中定义的字符,可以使用连字符,如a-z表示可以匹......
  • JavaScript 实现伽马算法
    伽马函数是数学中的一个非常重要的函数,它在统计学、物理学等领域有广泛的应用,其中最重要的应用就在概率统计和计算机科学中。接下来,我们来介绍如何使用JavaScript实现伽马算法。递归实现functiongamma(x){if(x===1){return1;}else{return(x-1)......
  • 前端进化笔记-JavaScript(一)
    简介:实现:三部分ecmascript语言核心DOM文档对象模型BOM浏览器对象模型DOM:用于html的应用程序接口(API),把整个页面映射成一个多层节点结构。例如:<html> <head> <title>samplepage</title> </head> <body> <p>helloworld</p> </body></html>DOM......
  • JavaScript 基础问答
      JavaScript数据类型有哪几种?  一共有五种:number、string、object、boolean、undefined.其中最后一个是定义变量后没有赋值介绍隐式类型转换字符串+数字=字符串;字符串-数字=数字;+数字字符串=数字null经过数字转换之后会变为0undefined经过数字转换之后会变为NaN......
  • Javascript数据类型
    值类型和引用类型原始类型(alias:值类型,基础类型)primitive:stringnumberbooleannullundefinedsymbol引用类型:Object其他内置Object派送类型ArrayFunctionMapSetWeakMapWeakSetRegExpNaN:特殊的Number类型,IsNaN()判断一个值是否为NaN引用类型可以有......
  • JavaScript 使用 splice 方法删除数组元素可能导致的问题
    JavaScript使用splice方法删除数组元素可能导致的问题splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。JavaScript遍历数组并通过splice方法删除该数组符合某些条件的元素将会导致哪些问题?导致......