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

[lqzhgood]

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

[paloalto]

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]

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

[lqzhgood]

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

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

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

[lqzhgood]

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

[ss098]

https://github.com/LeaVerou/dpi

[SoloCompany]

如果只是希望实时预览页面效果，不需要 XCode 啊
Safari - 开发 - 进入响应式设计模式 (CMD+OPT+R)

[lqzhgood]

@SoloCompany 那个只是 100% px 显示，不是 100% 物理单位显示。
说白了 Chrome F12 这些显示的窗口和你 iPhone 的屏幕不一样大

[SoloCompany]

@lqzhgood 那为何 XCode 就会让你产生是 1:1 的错觉？

[lqzhgood]

@SoloCompany
是不一样大啊 有什么问题么？