专栏名称: qize
前端交互开发工程师
目录
相关文章推荐
51好读  ›  专栏  ›  qize

移动端前端开发中需要知道的一些屏幕知识

qize  · 掘金  · 前端  · 2018-01-02 03:45

正文

TOC

像素(Pixel)对于WEB开发者来说很是熟悉,在PC互联网时代没少与其打交道。进入移动互联网之后,随着移动设备屏幕的解析度越来越高,衍生了一些关于屏幕和像素的一些新概念,比如DPI,DP,PT,Retina,4K等等,本文对这些概念做一个简单的介绍。

DPI与PPI

DPI(Dots Per Inch)是印刷行业中用来度量空间点密度用的,这个值是打印机每英寸可以喷的墨汁点数。计算机显示设备从打印机中借鉴了DPI的概念,由于计算机显示设备中的原子单位不是墨汁点而是像素,所以就创造了PPI(Pixels Per Inch),这个值是屏幕每英寸的像素数量,即像素密度(Screen density)。由于各种原因,目前PPI(主要是iOS)和DPI(比如在 f Android 中)都会用在计算机显示设备的参数描述中,不过二者的意思是一样的,都是代表像素密度。

高PPI屏幕显示的元素会比较精细(看起来会比较小),低PPI屏幕显示的元素相对来说就比粗糙(看起来会比较大),我们通过一幅图来看看在不同PPI下元素显示的区别:

PPI

HD与4K

现在移动设备、智能电视宣传最多的两个关键词估计就是HD、4K,这二者都是用来描述显示设备分辨率的标准,到底二者之间有什么区别?

HD(High-Definition)的分辨率要高于1280x720px或者720p。

Full HD的分辨率要高于1920x1080px,目前是主流电视以及高端手机(比如Galaxy SIV, HTC one, Sony Xperia Z, Nexus5等)采用的是这个分辨率。

4K(也叫做Quad HD或者Ultra HD)的分辨率从3840x2160起步,主要是现在高端电视的分辨率;其还有一个更高的4096x2160的标准,主要用于电影放映机或者专业相机。

4k

Retina

f Retina display 即视网膜屏幕,是苹果发布iPhone 4时候提出的,之所以叫做视网膜屏幕,是因为屏幕的PPI太高,人的视网膜无法分辨出屏幕上的像素点。iPhone 4/S的PPI为326,是iPhone 3G/S的两倍,如下图:

retina-01

由于屏幕在宽和高的像素数量提高了整整一倍,所以之前非Retina屏幕上的一个像素渲染的内容在Retina屏幕上会用4个像素去渲染: 1x1px(non Retina) = 2x2px(Retina) ,这样元素的内容就会变得精细,比如:

retina-02

注意, Retina display 是苹果注册的命名方式,其他厂商只能使用 HI-DPI 或者其他的命名方式,不过意思都是一样的,就是屏幕的PPI非常高。







请到「今天看啥」查看全文