美文网首页方式方法iOS 技术文集前沿技术的应用
(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

作者: 产品经理333 | 来源:发表于2015-08-30 13:59 被阅读31625次

         今天我给大家来讲讲这几个咱们经常打交道的词到底啥意思,以及他们之间到底有什么关系。这篇文章是我花了一个下午从N多篇文章里提炼出的一个白话版,保证让你看得懂。

        咱们从手机开始说起吧。先上一张图,给大家看看关于手机屏幕方面的一些参数。红框内的三个参数,大家一定都不陌生,我也不陌生。不过讲真的,就在不久前,我连手机的屏幕尺寸到底是怎么算出来的都不知道。下面我们开始慢慢讲。

    屏幕(主屏)尺寸是什么,怎么算?

    下面这张图是华为荣耀7的尺寸图,图上写的是5.2英寸。那么这个5.2英寸到底是怎么算出来的呢?在说这个问题之前,我们先进行一下单位的换算。我们平时是不用英寸这个单位的,我们用的是毫米,厘米,米这些单位。那么英寸和毫米,厘米之间怎样的换算关系呢?我也不知道,所以我百度了一下。

    1英寸(inch)=2.54厘米(cm)

    原来一英寸相当于我们的2.54厘米这么长。现在让我们回到5.2英寸到底是怎么算出来的这个问题。一开始呢,我觉得可能是手机屏幕的面积有这么大吧,后来我百度了英寸之后,才发现自己有多愚蠢。因为英寸是长度单位,面积的表示要用面积单位,英寸显然不可以表示面积。从这一点,就否认了我的想法。

    其实,我们所说的这个5.2英寸是手机屏幕对角线的长度。

    我这么一说,有点数学常识的人就知道手机的屏幕尺寸是怎么算的了吧。没错,就是那个勾股定理了,知道手机屏幕的长和宽,然后利用勾股定理,就可以算出斜边的长了。还有个更简单的方法,只要用尺子量一下它的对角线是多少厘米,然后再换算成英寸就搞定了。

    分辨率又是什么鬼?

    上面的图显示,华为荣耀7的分辨率是1920PX*1080PX。那么,这个分辨率又是怎么回事呢?可能大家注意了,1920和1080后面都跟了PX的字样,这个PX就是我们很熟悉的像素了,这个像素咱们后面讲,现在你只要明白,像素是分辨率的单位就好了。

    在讲解分辨率之前,我们要明白一个概念。在我们手机上呈现的一条线,一个面,一张图像都是由最小的单位像素来表示的,你也可以简单理解为是由一个个小方块组成的。看看下面这张图你就明白了。

    所以呢,分辨率1920px*1080px的意思就是,在这个华为荣耀7的5.2英寸屏幕上,在竖向的高度上有1920个像素块,在横向的宽度上有1080个像素块。

    下面来讲讲啥是分辨率比?

    你可能注意到了,手机的屏幕是个长方形,高是1920px,宽是1080px。你稍计算就会发现,这个高和宽的比例是16:9的。说到16:9这个比例,经常看视频的同学一定就不陌生了。手机屏幕有各种分辨率比,这个比你也可以看作是手机屏幕的尺寸比。根据百度百科显示,手机分辨率之所以表示成1920px*1080px这种形式,也是为了方便表示手机屏幕的大小。这里的大小,应该指的就是手机屏幕的尺寸吧。其实,告诉你一个手机的分辨率,你真的就能计算出手机屏幕的尺寸吗?那么,还差什么条件才能计算出手机屏幕的尺寸呢?

    什么是屏幕像素密度?

    屏幕像素密度,即每英寸屏幕所拥有的像素数,英文简称PPI。在读到这个每英寸屏幕时,我曾经深深的疑惑,这个每英寸是不是每平方英寸的简称呢?事实证明,我还是太年轻,这个英寸跟之前手机屏幕的尺寸一样,也是对角线的长度。所以,我们可以这么理解屏幕像素密度,即在一个对角线长度为1英寸的正方形内所拥有的像素数。说到这里,大家可能还是有些疑惑的,没事,接着看下面。

    屏幕像素密度,分辨率,屏幕尺寸的关系是什么?

    这三个专业名词之间,有着非常严谨的关系。为啥说严谨呢,因为这三者之间,有一个公式可以表示。

    这个公式真是简单明了,把很多疑问都给我们解决了。我们还是拿华为荣耀7手机为例,我们知道它的尺寸为5.2英寸,分辨率为1920px*1080px(1920px就是公式里的纵向,1080px就是公式里的横向了)。你不信的话就用公式算一下,最后得出的PPI,是不是就是424ppi。我算了一下,结果是423.6359942465958,懂得四舍五入的同学就知道424是个近似值了。

    像素的大小是固定的吗?

    我先这么说一句,像素是没有实际的物理尺寸的。为啥呢,按照惯例,举个例子。

    上面的这两张图,第一张是苹果6手机的屏幕参数,第二张还是出镜率最高的华为荣耀7的屏幕参数。大家注意看,这两个手机的分辨率都是1920px*1080px。但是,苹果手机的屏幕尺寸比华为荣耀7小了0.2英寸。又一个但是,苹果手机的屏幕像素密度(PPI)却比华为荣耀7高了45个PPI,也就是每英寸像素个数多了45个。这说明了啥?说明了同样的一英寸的长度,苹果手机用469个ppi来显示,华为只用了424个ppi来显示。你能告诉我哪个手机的显示效果更加精细吗?同样是一英寸,同样都是像素,为啥苹果手机一英寸有469个像素,华为只有424个呢?我们知道,英寸是长度单位,它有固定的物理尺寸。那么问题就只能出在了像素身上。这说明,像素这个东西,在苹果手机上变小了。所以,像素这个东西,就像金箍,能变大能变小。

    电脑屏幕可以调分辨率,难道是通过调整它的像素大小实现的?

    你错啦,要是这么简单,我写这篇文章有个卵用?其实类,在同一个设备上,它的像素个数是固定的,这是厂商在出厂时就设置好了的。只有不同的设备之间,才有像素大小的区别。既然在同一个设备上,像素点数早就设定好了,那电脑上可以调整分辨率是怎么回事?我再怎么调,像素点数还是那么多啊。

    人家系统给你推荐的是1366px*768px的分辨率,你知道意味着什么吗?没错,微软在这块屏幕上竖向设置了768个像素,横向设置了1366个像素。再怎么拉扯,这个数字是不会变了。那么,为啥我还能调整分辨率呢?我要是调整到800px*600px,按照定义,横向就是600个像素,竖向就是800个像素了啊。其实呢,你把分辨率调成800*600,系统就会分配给你800*600个有效像素个数,也就是真实的色彩块。其他的个数呢,就由系统自作主张,通过一系列运算给你一个模拟色彩块,填充成正好1366*768个色彩块。这些拿来充数的像素块,和真实的像素块放到一起。就好比一个正规军,里面掺了很多杂牌军一样,只能是队伍不好带了。

    PPI大的手机显示效果就越精细吗?

    要回答这个问题,就要先明白,一个像素到底包含了什么?一个像素其实就是一个色彩块,你不信的话,就去前面看看那张风雨雷电图。同样的一英寸,苹果手机能展示469个色彩,华为只能展示424个色彩,当然是苹果手机的显示效果更好了。也就是苹果6在出厂时,早就在屏幕上设置了同样个数更小的像素块,也就意味着可以显示更多的色彩。

    屏幕的清晰程度其实是分辨率和尺寸大小共同决定,用ppi指数衡量屏幕清晰程度更加准确。

    屏幕尺寸固定,分辨率越高,PPI就越高吗?

    废话,看公式啊。

    分辨率固定,屏幕尺寸大了,PPI是不是就少了?

    废话,看公式啊。还有,苹果6和荣耀7的例子还很鲜活的摆在这呢。

    PPI不变,屏幕尺寸变大,分辨率是不是也会变大?

    废话,看公式啊。

    鉴于篇幅太长,我本来还想把安卓手机上app的图标显示问题说一说,看来只能留到下一次了。

    相关文章

      网友评论

      • ENG八戒:从 PPI 的计算公式来看,PPI 指的应该是「在对角线上,每英寸长度所对应的像素个数」,这里有点特别,概念都限定讨论的范围为「在对角线上」,计算公式上面的分母就是对角线上的像素个数,我们说的屏幕尺寸也指的是对角线的长度而已。而理解成「在一个对角线长度为1英寸的正方形内所拥有的像素数」这个其实欠妥。:smile:
      • 5e1753b25cfe:简单透彻,感谢
      • 吃不胖的茶叶蛋:大佬 语言很幽默 说得也很清晰 受教了 感谢
      • 木子水吉_08:有疑问才要评论和你讨论啊,既然看懂了就没有啥可讨论的了,说明你写的很透彻明了.
      • WOTK:关于这些鬼概念我唯一看懂的文章,好文!
      • 秋夜已凉:‘’我们可以这么理解屏幕像素密度,即在一个对角线长度为1英寸的正方形内所拥有的像素数。‘’ 你确定?
      • 33fa2208e7b2:楼主,我很欣赏你这篇通俗易懂的文章。但是我对你的解释感觉有点矛盾,按照公式,ppi是每英寸拥有的像素数,可你上面又解释说是以一英寸为对角线的正方形内拥有的像素数,一个是线,一个是面,楼主解释下,
        产品经理333:@qzuser_1a50 谢谢你的认真阅读,每英寸这个说法是我偷懒的说法,还是以后者为准。
      • d8698d63d4cd:我有个问题啊大佬,既然显示器改分辨率只是有效像素数量的变化,那为什么改变分辨率时候,图片大小会变化啊?这个咋解释呢
      • 草莽小弟:写的太好了,谢谢分享
      • 吉莉安:讲的好明白~ 那么其实APP端要获取的是分辨率、PPI,才能适配页面对么?那么os和ua呢?
      • 胡家三少:楼主解释的比较清晰,,但能否解释一下图片的大小和屏幕的分辨率大小有什么分别??有的图片大小是固定的,,但在不同的设备上面显示不太一样,有的清晰,有的模糊。
      • 爱做梦的鱼:我也来说一下吧,其实分为了设备独立像素,也叫密度无关像素,就是我们常说的css像素,这个属于逻辑像素,只存在在web前端编程概念里面,而设备像素又称物理像素,是真实的像素单元,那么为了让不同屏幕下看起来效果一样,就出现了一个dpr,这个也是css像素与物理像素之间的连接点了,最早android是1:1的,定义了160ppi=1px;那么iPhone6s的ppi是326ppi;326ppi/160ppi 约等于2,也就是说1个css像素需要2个设备像素去显示,我们这个时候看起来就更清晰了。
      • 连阔:"所以,我们可以这么理解屏幕像素密度,即在一个对角线长度为1英寸的正方形内所拥有的像素数"
        这句话可能不太对,PPI指的是“每英寸长度上具有的像素数。”
        公式没错,但是解释的让人容易误解~
      • iamxcc:以前傻傻分不清,现在终于弄懂了。感谢👏
      • 来壶马猴烧酒:我还是不懂调整屏幕分辨率显示的那里!
      • 33e27abb766c:差不多是这样,不过有点漏的,其实跟屏幕的长宽比例也有关系,虽然现在绝大部分屏幕都是16:9,但是有少部分21:9的,还有以前普屏时代的4:3(ipad就全是这个比例的,顺便说一句,平板电脑这个比例最好,宽屏非常不好用)
        首先所有人高中学不等式的时候一开始接触的应该就是a^2+b^2>=2ab吧,证明过程就是从(a-b)^2>=0所以a^2+b^2-2ab>=0得出来的,并且还可以得出当a=b时ab的积达到最大值
        这里把a和b看成屏幕的长和宽,a^2+b^2就是屏幕对角线的平方,屏幕对角线固定时,屏幕的长和款越接近(相差越小)面积越大,长和宽相差越大面积越小
        所以计算ppi的时候要确定屏幕比例,而不能光说“对角线是1英寸的屏幕有多少像素点”,因为真正决定像素点密度的不是对角线长度而是面积
      • 柯索:卧槽,谢谢楼主解决我的疑惑,困惑好久了
      • 喋不休:我查了一下,你说的不同手机像素大小不同就没法说通,你那个截图参数不对,苹果6的参数是那样吗?
      • BkTian:苹果6不是4.7寸屏幕1334/750分辨率吗?
        妙手空虚:@Bk_Tian 恩,作者估计笔误,1920*1080是iPhone6 plus的分辨率,我是做iOS开发的
      • adf641519d60:解释的很好
      • 就叫初九吧:人家系统给你推荐的是1366px*768px的分辨率,你知道意味着什么吗?没错,微软在这块屏幕上横向设置了768个像素,竖向设置了1366个像素。 这个横向和竖向是不是反了
        产品经理333:@邹十四 没错,已经更正了,多谢 :smiley:
      • 18d6296d94fc:哈哈,最近刚搞明白这些东西,楼主写得也比较清楚。赞一个 :+1:
      • 31d46a7dbc92:我不太明白本文中这句话“微软在这块屏幕上横向设置了768个像素,竖向设置了1366个像素”,不应该是显示屏出厂商吗?
      • b7fbbaeadcb2:应该是苹果6的PPI不符合公式
      • b7fbbaeadcb2:根据以上图示苹果6和荣耀7的屏幕参数,套用PPI公式算出来的PPI跟屏幕参数中给出的PPI不符合,这是什么原因?
      • fd36d025c2e7:文章中存在多处错误,误导读者,回去研究明白了再来说吧
        02cf58ae0f81:您不能随说一句就走了哇:confounded:
        产品经理333:@fd36d025c2e7 :smiley: 愿闻其详,有些地方确实我也拿不准
      • 尤努斯:iPhone的参数不对吧
      • 3d2d122eb1d6:粗略看了一下,楼主有些事情还是没搞太清楚,本人提两点建议,仅供参考:
        (1)正方形的面积正好是对角线的平方(这个简单推道一下就可以证明了),因此把PPI定义为每平方英寸像素数量是没错的。
        (2)按照楼主有关PPI的阐述,是没办法解释同尺寸屏幕(如11.6英寸)而PPI不相同的原因的(当然了我正是我想知道的)。
        默写年华Antifragile:正方形的面积等于对角线的平方除2 吧
      • 1e79df652642:涨知识了
      • 01bf5437a807:我有一个疑问就是,为啥1920px * 1920px + 1080px * 1080px所得结果再开根,再除以5英寸,结果为440.58ppi,而不是苹果手机参数所标注的669ppi呢?
      • 08dfcb6cf676:平时就一知半解 懒得查。好文
      • 49ddd930b016:其实楼主还可以补充关于Retina的描述
      • 总感觉自己一个人:您好,看到这篇文章很赞,能否申请授权转载。
        产品经理333: @遇见_暧昧的你 可以
      • ea65c1b737a7:大神什么时候说一下安卓图标啊
        ea65c1b737a7:@产品经理马忠信 啊 以为发送失败 却是刷屏了 by 什么时候讲图标
        产品经理333: @ea65c1b737a7 不是大神好伐!≥﹏≤
      • ea65c1b737a7:大神什么时候说一下安卓图标啊
      • ea65c1b737a7:大神什么时候说一下安卓图标啊
      • ea65c1b737a7:大神什么时候说一下安卓图标啊
      • ea65c1b737a7:大神什么时候说一下安卓图标啊
      • 08d3000c8a31:长知识了,nice
      • 叁点水:又长知识了
      • bin9999:默默
      • JackSu:楼主,你写这篇文章很棒。但是有个数据写错了。iPhone6的分辨率没那么高,根本不是1080P的。它的ppi才300多。
        产品经理333: @JackSu 你好~文中参数是苹果6s
        产品经理333:@JackSu 这个楼上已经纠正,上面的数据是苹果6plus的屏幕数据。多谢你的提醒。
        JackSu:@JackSu 苹果6的屏幕是4.7英寸,1334×750的像素,折合ppi是326。
      • 3c75aab1262c:赞!!!
      • 小曼曼:分辨率:是指手机屏幕的像素点数,一般描述屏幕的宽与高。 如720-1280表示屏幕在宽度上有720个像素高度上有1280个像素
        屏幕大小:一般是指屏幕的物理尺寸,以英寸为单位。如手机5.2寸 就是指的屏幕对角线的尺寸。
        密度:dpi或Ppi 表示每英寸的像素点数 数值越高显示越细腻。
        产品经理333:@小曼曼 这些知识,看这篇文章可以了。
      • 大头星:电脑可以调整分辨率是CRT的特性,并非没有卵用,也是向前兼容的遗留问题
        大头星:@产品经理马忠信 这个与不同类型屏幕的显示原理有关系,LCD屏幕上每一个像素点其实都是有三个微小的RGB三色发光单元通过控制它们的发光比例来显示一个颜色,这三个发光单元所组成的像素点大小以及像素点之间的间隔在制造时候就决定好了,所以LCD的物理分辨率是固定的。而更古老的CRT是通过三速电子束不断以扫描方式轰击屏幕上的荧光粉来发光显示,电子束的大小间隔可以通过实时的改变偏转磁场的强度频率等进行改变,所以CRT有最大分辨率之说,当然电子束也不可能无限大所以还有最小分辨率,但是最大最小间的范围很广,落在这个范围的分辨率都是一对一的物理分辨率并非计算机插值计算。此外CRT的显示原理还决定它的像素点不一定需要是方形的,所以你现在在PS,AE等的文档设置还能找到非1:1像素点的设置。
        产品经理333:@大头星 对于这块知识~我确实了解的不够,希望多向您请教一下。
      • 3d8e56563ea3:请问你说的像素的大小尺寸是厂家出厂设置好的是指的屏幕的制造工艺决定的吗?
      • 3bfc5e4cadd1:楼主辛苦了,文章不错哈,科普好文
      • 刀鞘:这段中
        上面的这两张图,第一张是苹果6手机的屏幕参数,第二张还是出镜率最高的华为荣耀7的屏幕参数。
        不是苹果6,而是苹果6 plus,苹果6是1334*750的分辨率。
        产品经理333: @万晚霞 不好意思~这是苹果6s的参数~我没说清楚
        万晚霞:苹果系列没有五英寸的手机 这文章也太不严谨了
        产品经理333:@刀鞘 多谢指正。
      • ae4b8db6f79c:全是不错的科普小文章!
        ae4b8db6f79c:@产品经理马忠信 值得鼓励!!!!
        产品经理333: @翟博文 有些地方表达还是不够清楚,还请抱着怀疑求证的眼光看待😊
      • 木子亲斤生:楼主我为你的幽默点赞!23333333
        产品经理333: @木子亲斤生 其实想幽默一把的,只是觉得太卖弄就没敢幽默。233333
      • 845b44320404:原来如此这般,这般如此啊
      • 裸奔的凯子哥:快去看我写的文章 http://blog.csdn.net/zhaokaiqiang1992/article/details/45419023
        产品经理333:@裸奔的凯子哥 嗯,其实这篇文章算是科普一下,并没有展开太多,也不够严谨。我也准备再往下接着写。
        裸奔的凯子哥:@产品经理马忠信 我的是面向开发的,你的更易懂一些,阅读对象不一样
        产品经理333:@裸奔的凯子哥 佩服佩服,比我这篇深刻多了
      • 28c2722ff2ae:原来如此 涨姿势~
      • 家和万事亨:ppi的话,是不是这样解释会更好理解呢?就是一英寸长的直线,要穿过多少个像素单元!ppi越大,代表穿过的越多,也就是说,相同长度的直线,用更多的像素单元来显示的话,显示的效果肯定会好于像素少的!
        产品经理333:@佳铭 你可以这么理解,就是穿过了多少个像素块
      • 小曼曼:Ppi与dpi是不是没差异?只是ppi是iOS的叫法。 Dpi是安卓系统的叫法? 求解!
        产品经理333:@小曼曼 DPI(Dots Per Inch)最初用于衡量打印物上每英寸的点数密度,就是说你的打印机可以在一英寸内打多少个点。DPI值越小图片越不精细。

        当DPI的概念用在计算机屏幕上时,就应称之为PPI(Pixels Per Inch)。同理: PPI就是计算机屏幕上每英寸可以显示的像素点的数量。你说 DPI大伙也能理解。(我觉得这个解释蛮好的,从别处复制过来的,你看一下,能不能理解)
      • f38befa663a7:总结的不错
      • 雷欧酱:仔细查了下,屏幕像素密度是屏幕上一英寸的长度用多少像素来体现。所以这个表述“在一个对角线长度为1英寸的正方形内所拥有的像素数”是不正确的
        雷欧酱:@产品经理马忠信 PPI只能是长度,说到面积,就不正确了。
        产品经理333: @无骛 我觉得你理解PPI还是得根据那个公式来,自己算一算。
        产品经理333:@无骛 你看下公式就知道了,分母是屏幕的对角线长度,所以PPI也是对角线上的像素个数
      • liuxd:不错不错。受教了。之前一直对PPI不是很清楚,这下够清楚了。
        产品经理333:@liuxd 其实PPI和DPI的区别我没有讲,你自己可以再去了解一下
      • 雷欧酱:以前只有大概概念。现在算是很清楚了。不过PPI那块还是不太能理解,感觉挺奇怪的,因为按公式来看的话,就是看对角线上每一英寸有多少个像素点了,而不是每平方英寸有多少像素
        雷欧酱:@产品经理马忠信 我也仔细看了一下,知道我们的理解都是一样的。但你文章里面这句话让我产生误解,“所以,我们可以这么理解屏幕像素密度,即在一个对角线长度为1英寸的正方形内所拥有的像素数。”,说正方形是不对的。
        产品经理333:@无骛 我又看了一下你的评论,我想强调一下,我根本就没说是每平方英寸有多少像素。请看我的原文这段话“在读到这个每英寸屏幕时,我曾经深深的疑惑,这个每英寸是不是每平方英寸的简称呢?事实证明,我还是太年轻,这个英寸跟之前手机屏幕的尺寸一样,也是对角线的长度。”。
        产品经理333:@无骛 我们可以这么理解屏幕像素密度,即在一个对角线长度为1英寸的正方形内所拥有的像素数。说白了,我们知道了一条对角线上有多少像素,也就知道了对角线为一英寸的正方形里有多少像素
      • 产品经理333:看文章不评论你们啥心理?都没人跟我讨论了,囧。
        jasminefig:@产品经理马忠信 写好了吗?好期待:sunglasses:
        产品经理333:@jasminefig 行,没问题
        jasminefig:求讲下retina的

      本文标题:(全解析)屏幕尺寸,分辨率,像素,PPI之间到底什么关系?

      本文链接:https://www.haomeiwen.com/subject/wrwkcttx.html