为什么在retina屏下 1px使用2dp渲染?

来源:3-5 移动web特别样式处理

忆03鹜

2016-03-01 11:56

不是很理解 1dp 在160dpi下 应该等于1px  在retina屏下 由于像素比ppi大于2  意味着相同的dp 需要更多的像素来渲染 1dp应该等于2px  为什么是 1px 使用2dp?? 

写回答 关注

3回答

  • 不浪漫
    2017-03-13 22:21:59

    哎。那你针对什么水果6pl  在 transform: scale()  这里 对应的设置 数据不就好了 。 你要搞清楚人家讲课的目的。死缠着这些  真服

  • 忆03鹜
    2016-03-02 16:58:21

    我可能是没弄清楚  但我目前了解的是 iPhone 5的设备分辨率 是1136*640px  即320*568pt  此时 1pt=2px 即iOS中的@2x   Android中在不同的hdpi下 1dp对应的像素也不同  dp有点像物理尺寸  同样是100dp的图片 在160dpi的设备下 图片大小是100px 在320dpi的设备下 图片大小应为200px才能达到100dp  我是这么理解的 对于retina屏的原理 是把1个px分成4份去显示了 在dpr=2的设备下 1px显然不能完全填充到1dp 根据retina屏的工作原理 它把1px分成了4份(即长宽各增长1倍)去显示 所以 截图后1px的边框 变成了2px  当在iPhone 6 plus里 dpr=3  1px应该分成了9份去显示长宽应该变为原来的3倍 此时截图边框应该会变为3px (这个未测试,iPhone6+ 实际上dpr≈2.8 apple为了好做适配改成了3 ) 但也不应该是 1px=2dp。

  • 银马座
    2016-03-02 13:02:01

    因为你没有理清楚他们之间的关系。

    以iphone5为例

    设备分辨率1136*640dp------>>根号下(1136*1136+640*640)/4=326ppi(屏幕每英寸的像素数量)------>>

    326ppi属于retina屏幕,(设备像素缩放比,即dp/px)dpr=2------>>1px = (dpr)*(dpr)*dp------>>iphone5的屏幕为320*568px,也就是说1px使用2dp


    定义:

    px:CSS pixels 逻辑像素,浏览器使用的抽象单位

    dp,pt:device independent pixels设备无关像素

    dpr:devicePixelRatio 设备像素缩放比

    PPI:屏幕每英寸的像素数量,即单位英寸内的像素密度

    PPI越高,像素数越高,图像越清晰。

    但是可视度低,系统默认设置缩放比越大。

    Retina屏(高清屏):dpr都是大于等于2


Hello,移动WEB

课程介绍移动web的开发基础,排版布局,常见移动web问题

110230 学习 · 177 问题

查看课程

相似问题