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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 2666 天前的主题，其中的信息可能已经有所发展或是发生改变。

没有 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 长度.

9 条回复 • 2017-08-08 00:06:44 +08:00

paloalto

2017-08-07 11:22:28 +08:00

xcode 有个 Simulator，可以在电脑上模拟显示 iOS 设备。

你想问的是不是这个：
How to access screen display ’ s DPI settings via javascript?
https://stackoverflow.com/questions/476815/how-to-access-screen-display-s-dpi-settings-via-javascript

noe132

2017-08-07 11:44:21 +08:00

前端不需要关心设备的 dpi 吧。
css px 和 physical px 是根据缩放比例对应的。

lqzhgood

2017-08-07 11:53:34 +08:00

@paloalto
这个链接我刚才页搜到了，说的是相关问题，但是也并没有解决问题。
下面都是说用 witdh:1in; 然后测量这个 dom 的 width -> px，来换算。但是 1in 只是相对于 96px 定义，并非真实物理的 1 英尺。

xcode 确实是个解决办法，但是对于这样简单的需求确实过重了。不过给了个很好的思考方向。

目前考虑用 winApi 导出 Dpi 为 JSON，再 script 引入, 然后做成批处理应该就可以了。
3Q~

lqzhgood

2017-08-07 11:54:44 +08:00

@noe132
我想知道我的页面在真实尺寸的 iPhone 上显示是什么效果。所以需要知道 DPI。
平时确实是不用处理的，只因为我有了个奇怪的想法。。。