网站首页 » 前端开发 » 移动WEB » 设备像素,设备独立像素,CSS像素
上一篇:
下一篇:

设备像素,设备独立像素,CSS像素

前言

这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。

基本定义

设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。

CSS像素:CSS像素是Web编程的概念,独立于设备的用于逻辑上衡量像素的单位,也就是说我们在做网页时用到的CSS像素单位,是抽象的,而不是实际存在的。

设备独立像素:(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统转换为物理像素。
所以说,物理像素和设备独立像素之间存在着一定的对应关系,我们会在接下来的篇幅中说到它们。

通过上面的定义我们就可以从中挑出两个来展开就可以了,也就是设备像素和设备独立像素(在本文我们不妨假装Android的“设备独立像素”是通用叫法),正如你所看到的,因为设备独立像素已经包括了CSS 像素。

在PC端可以通过screen.width/height属性来获取设备独立像素值,在PC端这个值把它当成我们常说的屏幕分辨率(实际上它不是,但是由于在PC端设备像素和设备独立像素数值相等,才有这么一个不准确的说法)。但你把浏览器切换到设备模式时,也就是在移动端环境下通过上面的screen.width/height获取的不是移动设备的分辨率,而是移动设备的屏宽/高(这里只是猜测),如:Iphone 5s下screen.width =320screen.height = 568。本以为是浏览器里的设备环境没有完全模拟真实的移动设备环境,可是用真机测试时,还是出现同样的结果screen.width =320、screen.height = 568。值得注意的是:不管你手机是否切换到横屏,这两个值还是一样的。所以不管是移动端还是PC端通过screen.width/height获取的这个值是设备独立像素(CSS 像素),而不是设备的屏幕分辨率,因为设备的屏幕分辨率对于WEB开发者来说是无法通过代码来获得的,是完全透明的。

两者之间的关系

在一定的条件下两者它们两者是可以相等的,比如:在PC端浏览器默认情况下(100%,即页面没被缩放),一个物理像素 = 一个设备独立像素。而在移动端可就不一样的,这两个值很多时候是不相等的。为什么会不相等,因为为了让你看起来更爽,爽在哪里?就是画质的精细度。即使它们有关系,但又不相等,那么总得有个说法或者公式吧?别急,在这之前,我们还得认识个东西叫PPI。

PPI又是个什么东西?总之它是个好东西,不然为什么各品牌的手机商开发布会时常常挂在嘴边。PPI 全称是(pixel per inch)翻译下就是每英寸内有多少个像素点,这个像素点指的是设备像素点(物理像素),说得接地气点PPI就是像素密度(pixel density)。PPI的值越高,画质越好,也就是越细腻,看起来更有逼格。那么PPI是怎么算出来的呢?我来看看它的公式。

physical-pixel-device-independent-pixels

我们不妨用上面的这个公式做做数学题

physical-pixel-device-independent-pixels

结果应该跟红框中的一样吧?实际上会有零点几的出入,但这没关系。例如你用Iphone 6 来算时得出的结果:325.6122832234167 。

好了我们还是回到上面的问题:两者(设备像素和设备独立像素)是如何进行换算的?它们是通过设备像素比(dpr,device pixel ratio)来进行换算的。那么什么是设备像素比呢?

设备像素比

定义

设备像素比 = 设备像素/设备独立像素 // 在某一方向上,x方向或者y方向

那么现在问题来了,什么是设备独立像素呢?上面不是说过了吗?但我觉得再重复一篇也不为过。
设备独立像素(DIP,device-independent pixel,density-independent pixel),简单地来说设备独立像素就是:独立于设备的用于逻辑上衡量像素的单位。

逻辑上衡量像素的单位?这不就是说CSS 像素吗?没错就是它。好下面我们就来接着讲。

我想现在“设备独立像素”和“CSS像素”的关系已经狠狠地印在你的脑子里了吧!

如何获取

你可以通过JavaScript 中的window.devicePixelRatio来获取设备中的像素比值。

为了让大家更容易区分和理解,我们不妨把设备像素叫做设备光点。那么这个设备像素比有什么用呢?

它可以告诉你一个设备光点对应多少个像素点。还有一个东西我们明白了对于理解这个设备像素比会有帮助。设备光点的大小是固定的,是不可变的,而设备独立像素是可以被拉长或者被压缩的。这个要怎么理解呢,我们不妨来看看三个图,看完后相信你会明明白白的。

  • device-independent-pixels(dip)标准PPI(160)下的设备像素比
  • device-independent-pixels(dip)经放大后的设备像素比图示
  • device-independent-pixels(dip)经缩小后的设备像素比示图

注:深色为设备光点,浅色为设备独立像素

看完这三个图后我们可以得到如下结论:

一个设备光点可以对应一个CSS 像素(PPI = 160时);
一个设备光点可以对应多个CSS 像素(缩小);
一个CSS像素可以对应多个设备光点(放大);

下面我们来看个现实中的例子,Iphone 5s 使用的是 Retina 视网膜屏幕,什么是Retina视网膜屏幕?PPI 值超过 300 的叫做超高密度屏幕,只是 Apple 给它换了个高大尚的名称:Retina 视网膜屏幕而已。

在做移动页面开发的时候,相信你经常会遇到这种情况:在不同的手机上看时,里面的图片、文字或者线的大小会不一样,有时候大小区别还非常地大。原因就是刚才说到的设备像素比在作怪。

你想啊,如果在普通屏即标准 PPI下一个设备光点对应一个 CSS 像素时,页面不大不小,完美地渲染出来了。但在现在这个高逼格的年代,标准 PPI 已经很少见了。更多的是 Retina视网膜设备。而设备像素比不同的品牌的手机这个值也是不一样的。即使是同一个品牌的手机也不一样。你比如 Iphone 5s 设备像素比为2,Iphone 6s 设备像素比为3。至于安卓机中的设备像素比就更多了,有1.3、1.5、2、3等等。

想了解更多移动设备中的设备像素比可以前往 http://devicepixelratio.com/

但是有意思的是当你给一个元素定义宽为320px,高为200px时,在 Iphone 5s 中看到这个元素竟然只占据了屏幕大小(宽)的三分之一左右。这是为什么呢?这个比较有意思,现在我们下次再接着聊。

更新于:2017.02.27

由于有网友留言说:“所以,为什么是三分之一?说好的下次呢,都2017了”,谢谢这位网友的敦促,我会尽自己所能记录下我的过往,让我们在前端的路上越走越远,越走越成熟,越走越自信,越走越沉稳。所有我把为什么是三分之一的这篇文章补上《meta viewport 你真的了解吗?》,这篇文章得慢慢看,虽然没有说到三分之一的情况,但答案就在其中!

更新于:10:08 2017/3/24

感谢 codedreamfy 的评论留言。我觉得这里需要补充一个点,关于 viewport 的,也就是上面提到的隐藏答案,正如 codedreamfy 所说的在 Iphone 5s 下加个 meta viewport 就可以解决三分之一的问题,这是为什么呢?当加了meta viewport 后视窗大小就会等于设备屏幕大小。比如 Iphone 5s 的宽为 320。此时视窗的宽度也从 980  变成了320,于是当你给一个元素的宽设置为 320 时横向就可以满屏了。纯属个人见解,如有说得不合理的地方,愿请指教。

相关资料

http://screensiz.es/phone/

http://devicepixelratio.com/

http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

https://www.paintcodeapp.com/news/iphone-6-screens-demystified

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/physical-pixel-device-independent-pixels/

评论23
  1. 踏跃流星 2016年8月23日 at am11:24 回复

    最后两句话不对吧。

  2. miaowwwww 2017年2月26日 at am1:37 回复

    所以,为什么是三分之一?说好的下次呢,都2017了

    • zhaoxixiong 2017年2月27日 at pm3:09 回复

      谢谢提醒及对本博客的认可,我会继续努力,文章在这里《http://yunkus.com/physical-pixel-device-independent-pixels/》

  3. 刘轩 2017年2月27日 at pm6:02 回复

    一个设备光点可以对应多个CSS 像素(缩小);
    一个CSS像素可以对应多个设备光点(放大);

  4. DDD 2017年2月28日 at pm3:59 回复

    大神,你有QQ群吗?

    • zhaoxixiong 2017年2月28日 at pm7:41 回复

      有的,珠海 WEB 前端交流群:439917593

  5. codedreamfy 2017年3月23日 at pm6:04 回复

    首先,感谢一下,有心里,在茫茫网海里面我找了很多相关的资料一直没有搞明白,对应关系,被网上很多概念该弄混了,像chrome上面mobile模拟器上面显示的375×664这个应该是css像素或者说是设备独立像素吧,最后你说在5s下320px只显示了1/3,大概也是因为没有加meta标签的viewport吧,加上之后,视窗变为了屏幕视窗区的大小320px;那么就填满了。
    像iPhone6/6s/7都是说分辨率是750×1334;那么这个750是怎么来的呢?依据ppi/160得到比例系数,这个系数就是设备像素与设备无关像素的一个转换关系。window.innerWidth*dpr(比例系数)算下来就是分辨率的宽度了吧。这个比例系数主要是用于同一个页面在不同屏幕不同ppi下为了显示一致出现的吧

    • 朝夕熊 2017年3月24日 at am10:09 回复

      是的,你对设备像素,设备独立像素,CSS像素的理解应该挺到位的了,一起努力,加油!

      • codedreamfy 2017年3月24日 at am10:29 回复

        感谢鼓励!另外再次感谢你的文章,让我茅塞顿开,要是能打赏我就打赏了~,最后再次感谢您。

        • 朝夕熊 2017年3月24日 at am10:49 回复

          不客气。

  6. 七叶树 2017年3月31日 at pm6:35 回复

    所以CSS像素等于设备独立像素吗

    • 朝夕熊 2017年4月2日 at pm1:26 回复

      是的

  7. newhuan 2017年4月9日 at pm4:18 回复

    请问你的结论那三条,关于放大缩小 设备像素和虚拟像素的对应关系是不是写反了

    • 朝夕熊 2017年4月9日 at pm10:17 回复

      谢谢提醒,马上修正。

      • ivan 2017年4月17日 at pm5:35 回复

        现在是反的吧!!!!!

        • 朝夕熊 2017年4月18日 at pm8:16 回复

          现在是正确的,注意最后两行:设备光点和 CSS 像素的顺序是不一样。

  8. guoxi 2017年5月5日 at pm2:54 回复

    大神为什么我看到好几篇文章说 dp(device pixel )是物理像素???? 真的看晕了

    • 朝夕熊 2017年5月5日 at pm7:20 回复

      设备像素又称物理像素(physical pixel),一个意思,不同叫法而已。

  9. 小旋风 2017年5月17日 at pm7:30 回复

    拜读了博主的文章,受益匪浅,但是有个问题。iphone6plus的dp是414*736,px是1080*1920,dpr是3,通过已知参数应该可以推算出横向物理像素是414*3=1242个物理像素吧?那么用1242个物理像素显示1080个css像素,核算下来大概1.15个物理像素用来显示一个css像素?一个物理像素发光点可以用0.15个像素显示一个颜色,另外0.85个像素显示另外一种颜色吗?

    • 朝夕熊 2017年5月21日 at am12:14 回复

      这里的 iphone6 plus 有点特殊,它的物理像素点并不能通过 414*3=1242 算出来的(这是一般情况),iphone6 plus 确确实实只有 1080 个物理像素点,但是在渲染的时候 iphone6 plus 是先把图像渲染成 2208 x 1242 ,然后再缩放到 1920 x 1080。

  10. Chan 2017年7月23日 at am9:41 回复

    我的理解:
    按5s,他的分辨率是640*1136(物理像素或设备像素),而320*568(设备独立像素),这里是通过 物理像素 求取 ppi => dpr => 设备像素比 得到设备独立像素,但在博主上面关于设备独立像素的定义中:

    设备独立像素:(也叫密度无关像素),可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用并控制的虚拟像素(比如:CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”),然后由相关系统**转换为物理像素**。

    这里为什么说是设备独立像素得到物理像素,难道不是物理像素得到设备独立像素吗?不知道我的理解有没有错误?

    • 周红宇 2017年10月12日 at pm5:00 回复

      没有谁得到谁吧

  11. 周红宇 2017年10月12日 at pm4:56 回复

    设备光点是可以变化的吧,假设苹果6的尺寸提高分辨率,设备光点不是变小了,但是设备独立像素还是375

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END