javascript - 前端如何获取设备的 DPI/PPI ？

问题描述

问 题

没有 iPhone 的前端真是个忧伤的事情。想看看做出的 界面在 iPhone 上的 真实效果 是什么样子的。

真实效果 的定义是：

任意一台显示器 屏幕上图片的大小都是 真实物理单位（ iPhone6 尺寸为例）
宽 2.64 inches (67.1 mm)
高 5.44 inches (138.3 mm)

首先就需要获取到设备屏幕的 DPI/PPI， 然后计算出图片的 px，再显示。
那么问题来了，前端如何获取 设备的 DPI/PPI

P.S

在 MDN 查过了 length 的定义。
https://developer.mozilla.org/zh-CN/docs/Web/CSS/length

width:1in / 1cm ;  其中 in mm cm 都是相对于 1in == 96px 的情况下定义的。并非真实物理的 1 in 长度.

已知 firefox 可以使用 width：1mozmm; 来表示真实物理的 1mm 宽度。 chrome有解决办法么？

解决方案

没有直接的API，最可靠的方法是用户输入分辨率和屏幕尺寸进行计算；
自动检测的话，stackoverflow有些讨论，可靠性需要自行测试

这篇关于javascript - 前端如何获取设备的 DPI/PPI ？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！