V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lqzhgood
V2EX  ›  前端开发

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

  •  
  •   lqzhgood · 2017-08-07 10:54:15 +08:00 · 3400 次点击
    这是一个创建于 2425 天前的主题,其中的信息可能已经有所发展或是发生改变。

    没有 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
        1
    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
        2
    noe132  
       2017-08-07 11:44:21 +08:00
    前端不需要关心设备的 dpi 吧。
    css px 和 physical px 是根据缩放比例对应的。
    lqzhgood
        3
    lqzhgood  
    OP
       2017-08-07 11:53:34 +08:00
    @paloalto
    这个链接我刚才页搜到了,说的是相关问题,但是也并没有解决问题。
    下面都是说用 witdh:1in; 然后测量这个 dom 的 width -> px,来换算。但是 1in 只是相对于 96px 定义,并非真实物理的 1 英尺。

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

    目前考虑用 winApi 导出 Dpi 为 JSON,再 script 引入, 然后做成批处理应该就可以了。
    3Q~
    lqzhgood
        4
    lqzhgood  
    OP
       2017-08-07 11:54:44 +08:00
    @noe132
    我想知道我的页面在 真实尺寸的 iPhone 上显示是什么效果。 所以需要知道 DPI。
    平时确实是不用处理的,只因为我有了个奇怪的想法。。。
    ss098
        5
    ss098  
       2017-08-07 12:28:40 +08:00
    SoloCompany
        6
    SoloCompany  
       2017-08-07 13:18:00 +08:00
    如果只是希望实时预览页面效果,不需要 XCode 啊
    Safari - 开发 - 进入响应式设计模式 (CMD+OPT+R)
    lqzhgood
        7
    lqzhgood  
    OP
       2017-08-07 14:36:43 +08:00
    @SoloCompany 那个只是 100% px 显示,不是 100% 物理单位显示。
    说白了 Chrome F12 这些显示的窗口和你 iPhone 的屏幕不一样大
    SoloCompany
        8
    SoloCompany  
       2017-08-07 15:09:03 +08:00
    @lqzhgood 那为何 XCode 就会让你产生是 1:1 的错觉?
    lqzhgood
        9
    lqzhgood  
    OP
       2017-08-08 00:06:44 +08:00
    @SoloCompany
    是不一样大啊 有什么问题么?
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1066 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 18:57 · PVG 02:57 · LAX 11:57 · JFK 14:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.