当前位置: 首页 > 科技观察

移动端开发者必须了解的Pixel知识

时间:2023-03-21 16:33:44 科技观察

Pixel对于WEB开发者来说是非常熟悉的,在PC互联网时代也经常和它打交道。进入移动互联网后,随着移动设备屏幕的分辨率越来越高,衍生出一些关于屏幕和像素的新概念,如DPI、DP、PT、Retina、4K等。本文简单介绍一下对这些概念的介绍。DPI和PPIDPI(每英寸点数)在印刷行业用于测量空间点的密度。该值是打印机每英寸可以喷出的墨点数。计算机显示设备从打印机中借用了DPI的概念。由于计算机显示设备中的原子单位不是墨点而是像素,因此产生了PPI(PixelsPerInch)。该值是屏幕每英寸的像素数,即像素密度(Screendensity)。由于种种原因,目前在电脑显示设备的参数描述中使用PPI(主要是iOS)和DPI(如Android),但两者的含义是一样的,都代表像素密度。高PPI屏幕显示的元素会比较精细(看起来会小),低PPI屏幕显示的元素会比较粗糙(看起来会大)。下面我们来看看不同PPI下的要素显示器的区别:高清和4K移动设备和智能电视最热门的两个关键词估计就是高清和4K了。这两个都是用来描述显示设备分辨率的标准。两者有什么区别?HD(高清晰度)的分辨率高于1280x720px或720p。FullHD的分辨率高于1920x1080px,是目前主流电视和高端手机(如GalaxySIV、HTCone、SonyXperiaZ、Nexus5等)所采用的分辨率。4K(也叫QuadHD或UltraHD)的分辨率从3840x2160开始,主要是高端电视的分辨率;它还具有更高的标准4096x2160,主要用于电影放映机或专业相机。RetinaRetinadisplay即视网膜屏幕,是苹果在发布iPhone4时提出的,之所以称为视网膜屏幕,是因为屏幕的PPI太高,人的视网膜无法分辨屏幕上的像素点屏幕。iPhone4/S的PPI为326,是iPhone3G/S的两倍,如下图所示:非Retina屏幕上的一个像素在Retina渲染之前会使用4个像素在屏幕上渲染:1x1px(非Retina)=2x2px(Retina),这样元素的内容会变得更细化,例如:注意,Retinadisplay是苹果注册的一种命名方式,其他厂商只能用HI-DPI或其他命名方式,但意思是一样的,就是屏幕的PPI很高。DP/PT/SP随着移动设备屏幕的PPI不断提高,之前用物理像素(PhysicalPixel)测量显示元素的方法对开发者来说不再有效。为了解决这个问题,两个平台都提出了抽象像素的概念:iOS称为PT(Point,显示点),Android称为DP/DiP(DeviceindependentPixel,设备无关像素)。如无特殊说明,下面统一使用DP来描述。例如,44x44dp的元素在非Retina屏幕上等于44x44px,在Retina屏幕上等于88x88px(4倍)。SP(Scale-independentpixel)是一种缩放无关的像素。它和DP、PT一样是一个抽象的像素点,只是用来描述字体的大小。iOS中处理PPIiOS中处理不同PPI显示的方法很简单:首先规定高PPI下1DP等于1px,以这个PPI为基准(1x倍数)。如果显示设备的PPI是基准PPI的两倍,那么1DP就等于2px(2x乘数),其实就是简单的小学乘法。iPhone系列3G/S为1x倍频,其他为2x倍频:iPad系列iPad1代和2代为1x倍频,其他为2x倍频:iPadmini系列iPadmini一代为1x倍频,其他为2x倍频:在iOS中,同一个应用在非Retina屏幕和Retina屏幕上显示不同的资源。规则是:name.png是非Retina资源,name@2x.png是Retina资源,所以对于设计师来说,比如在设计的时候,需要考虑Retina屏和非Retina屏。看下面这个例子:Android中处理PPI由于Android系统是一个开放系统,需要适配的PPI有很多,所以把PPI划分得很细:ldpi(low)~120dpimdpi(medium)~160dpihdpi(high)~240dpixhdpi(extra-high)~320dpixxhdpi(extra-extra-high)~480dpixxxhdpi(extra-extra-extra-high)~640dpi需要把dpi对应的资源放到对应的目录下。Android会根据dpi自动选择资源。目录规则如下:drawable-mdpi/asset.pngdrawable-hdpi/asset.pngdrawable-xhdpi/asset.png。..可以看出Android中mdpi代表的PPI和iOS中1xmultiplier代表的PPI是一样的,iOS中xhdpi和2xmultiplier代表的PPI是一样的,如图:参考http://sebastien-gabriel.com/designers-guide-to-dpi/homehttp://developer.android.com/guide/practices/screens_support.html(完)作者:JeremyWei|可以转载,但必须以超链接形式标明文章的原始出处、作者信息和版权声明:http://weizhifeng.net/你应该知道的关于dpi.html