首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

js获取屏幕dpi

在JavaScript中,获取屏幕DPI(Dots Per Inch,每英寸点数)可以通过window.devicePixelRatio属性结合屏幕的物理尺寸来计算。devicePixelRatio表示设备像素与CSS像素的比例。

以下是获取屏幕DPI的基本步骤:

基本概念

  • DPI:每英寸点数,用于描述屏幕分辨率。
  • devicePixelRatio:设备像素与CSS像素的比例。

获取屏幕DPI的代码示例

代码语言:txt
复制
function getScreenDPI() {
    const devicePixelRatio = window.devicePixelRatio || 1; // 获取设备像素比
    const screenWidthInPixels = window.screen.width * devicePixelRatio; // 屏幕宽度(物理像素)
    const screenHeightInPixels = window.screen.height * devicePixelRatio; // 屏幕高度(物理像素)
    const screenWidthInInches = window.screen.width / devicePixelRatio / 96; // 屏幕宽度(英寸)
    const screenHeightInInches = window.screen.height / devicePixelRatio / 96; // 屏幕高度(英寸)

    const horizontalDPI = screenWidthInPixels / screenWidthInInches; // 水平DPI
    const verticalDPI = screenHeightInPixels / screenHeightInInches; // 垂直DPI

    return {
        horizontalDPI: horizontalDPI,
        verticalDPI: verticalDPI,
        averageDPI: (horizontalDPI + verticalDPI) / 2
    };
}

const dpiInfo = getScreenDPI();
console.log(`Horizontal DPI: ${dpiInfo.horizontalDPI}`);
console.log(`Vertical DPI: ${dpiInfo.verticalDPI}`);
console.log(`Average DPI: ${dpiInfo.averageDPI}`);

解释

  1. devicePixelRatio:获取设备像素与CSS像素的比例。
  2. screenWidthInPixelsscreenHeightInPixels:计算屏幕的物理像素尺寸。
  3. screenWidthInInchesscreenHeightInInches:将CSS像素尺寸转换为英寸(假设标准DPI为96)。
  4. horizontalDPIverticalDPI:计算水平和垂直方向的DPI。
  5. averageDPI:计算平均DPI。

应用场景

  • 响应式设计:根据屏幕DPI调整图像和布局,以适应不同分辨率的设备。
  • 高清图像加载:在高DPI设备上加载高分辨率图像,以提高显示效果。
  • 打印设置:根据屏幕DPI设置打印参数,确保打印质量。

注意事项

  • devicePixelRatio的值可能因设备和浏览器而异,不一定总是准确的。
  • 计算DPI时假设标准DPI为96,这在大多数情况下是合理的,但并不总是精确。

通过上述方法,你可以在JavaScript中获取屏幕的DPI,并根据需要进行相应的处理。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【QT】获取主屏幕DPI

背景在DpiAware = SystemAware的情况下需要获取主屏的DPI值,DPI感知DPI(Dots Per Inch)是指每英寸的点数,通常用于描述屏幕分辨率。...在Windows操作系统中,DPI感知(DPI Awareness)是指应用程序能够感知到屏幕的DPI设置,并根据DPI值调整其界面元素的大小和布局,以提供更好的用户体验。...DPI感知有两种模式:系统DPI感知和每个监视器DPI感知。系统DPI感知(System aware)系统DPI感知是指应用程序根据整个系统的DPI设置来调整其界面元素的大小和布局。...qInfo() 获取主屏...DPI在默认qt程序下,获取主屏DPI需要先调整DPI感知类型然后再获取,否则会拿到错误的DPI值,主要利用SHCore.dll和User32.dll两个系统模块,系统不低于windows 8.1话不多说

30110
  • 【Android 屏幕适配】屏幕适配基础概念 ③ ( 屏幕像素密度 DPI 与素材大小关联 | 屏幕像素密度 DPI 与 屏幕密度限定符关联 )

    文章目录 一、屏幕像素密度 DPI 与素材大小关联 二、屏幕像素密度 DPI 与 屏幕密度限定符 xhdpi 关联 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一...、屏幕像素密度 DPI 与素材大小关联 ---- 屏幕像素密度 DPI 与素材大小关联 : 屏幕像素密度 ( DPI , Dots Per Inch ) 为 120 dpi 时 ( ldpi ) ,...dpi 时 ( mdpi ) , 对应屏幕分辨率 320 x 480 ( HVGA ) , 对应素材放在 素材放在 res/mmap-mdpi 目录下 ; 屏幕像素密度 ( DPI , Dots...目录下 ; 屏幕像素密度 ( DPI , Dots Per Inch ) 为 480 dpi 时 ( xxhdpi ) , 对应屏幕分辨率 1080 x 1920 ( HD , 1080P )...就是屏幕密度限定符 ; 屏幕像素密度 DPI 与 屏幕密度限定符 关联 : ldpi : \rm 0 dpi \leq 120 , 对应图标大小 36 \times 36 ; mdpi :

    3.2K30

    【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI )

    文章目录 一、Android 与 iOS 屏幕宽高比种类 二、屏幕像素密度 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一、Android 与 iOS 屏幕宽高比种类...---- Android 屏幕尺寸类型如下 , 安卓设备的屏幕尺寸复杂性远远高于 iOS 设备 , Android 设备有两万种屏幕类型 , iOS 只需要适配五种分辨率即可 ; iOS 屏幕尺寸如下..., 只需要适配有限的几种屏幕类型即可 ; 二、屏幕像素密度 ---- 屏幕像素密度 的单位是 DPI , 是 Dots Per Inch 的缩写 , 也就是每 英寸 的 像素点 个数 ; 屏幕尺寸...指的是 屏幕 斜对角的 英寸 长度 ; 假设屏幕尺寸为 6.5 寸 , 屏幕的宽高分辨率为 1080 \times 1920 , 计算该屏幕的 屏幕像素密度 ( DPI , Dots Per Inch...3253 ② 然后计算每英寸的像素个数 : DPI = \cfrac{对角线像素个数}{屏幕尺寸} = \cfrac{3253}{6.5} \approx 500

    6.5K30

    js获取屏幕以及元素宽高的方法

    一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:...window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关...scrollWidth: 获取对象的滚动宽度 document.documentElement.scrollTop 垂直方向滚动的值 四.位置精确定位 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离...scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop...:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 五.坐标轴 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX

    6.9K20

    js获取屏幕大小,当前网页和浏览器窗口

    browser viewport $(document).width(); // returns width of HTML document (same as pageWidth in screenshot) 屏幕大小...对于屏幕大小你可以使用以下代码实现: screen.height; screen.width; 1.获取屏幕尺寸 获取屏幕宽度:window.screen.width;    //整个屏幕的宽度 获取屏幕高度...:window.screen.height;     //整个屏幕的高度 2.获取可用工作区尺寸 获取屏幕可用工作区域宽度:window.screen.availWidth;      //pc端与上面两个一致...,移动端除个别其他也一致(试一下即可) 获取屏幕可用工作区域高度:window.screen.availHeight; 3.获取body的宽高(不含边框) 获取网页内body的宽度:document.body.clientWidth...获取当前窗口body高宽 获取body宽度:$(document.body).width(); 获取body高度:$(document.body).height();

    12.4K20

    如何获取屏幕帧率

    前言 在王小二图解Android【006】高帧率屏幕这期的视频中,我给大家揭秘今年所有安卓旗舰都会吹的高帧率屏幕,其实高帧率屏幕不需要应用开发人员去主动适配,只要应用能在当前的硬件配置下,规定时间(1s.../屏幕帧率)中完成一帧的绘制就可以了。...那肯定有人就要问了,能否当前获得屏幕帧率,然后对高帧率屏幕做针对性优化,在有限的时间内完成一帧的绘制。 一、标准SDK接口 很简单,只要能够拿到WindowManager就可以获取。...02-26 23:38:01.633 19234 19261 V Kobe : Screen Hz is 59//大概的推测出是60hz的屏幕 有没有发现上述代码中的两个细节 1.Choreographer.getInstance...思考 如果你们有其他想法可以获得屏幕的帧率,也可以回复留言。

    2.2K30

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    :window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度...offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...: window.screen.height 屏幕分辨率的宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度: window.screen.availWidth...-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度

    8.1K30

    js 获取屏幕各种宽高的方法(浏览器兼容)

    屏幕的有效宽高: window.screen.availHeight window.screen.availWidth 网页可见区域宽:document.body.clientWidth  网页可见区域高...document.body.scrollTop  网页被卷去的左:document.body.scrollLeft  网页正文部分上:window.screenTop  网页正文部分左:window.screenLeft  屏幕分辨率的高...:window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度:window.screen.availWidth...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

    3.6K100

    JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转)

    :window.screen.height  屏幕分辨率的宽:window.screen.width  屏幕可用工作区高度:window.screen.availHeight  屏幕可用工作区宽度...scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离  scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离  scrollWidth:获取对象的滚动宽度...  offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度  offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置...: window.screen.height 屏幕分辨率的宽: window.screen.width 屏幕可用工作区高度: window.screen.availHeight 屏幕可用工作区宽度...--  var winWidth = 0; var winHeight = 0; function findDimensions() //函数:获取尺寸 { //获取窗口宽度 if (window.innerWidth

    16.2K10
    领券