欢迎访问大高互联网络公司!实力接全国网站SEO优化快速上首页,精准锁定流量源,无排名不收费,快速建网站、开发|营销推广,SEO建站一站式服务!
资讯发布

您所在的位置: SEO快排 > 浙江 > 杭州 > 正文

移动端开发教程之像素的显示问题汇总

日期:2020-05-21 13:55:00 作者:大高SEO 杭州

相信在移动开发的过程中大家都会发现,移动端的显示一般与桌面端的不一样。比如在iphone6上显示一个1334x750像素大小块状元素,虽然在苹果官网上iphone6标称的屏幕像素密度是1334x750规格,但是我们却发现这个1334x750像素大小的块状元素却不能铺满整个屏幕。

那到底是为什么呢?下面从几个方面来作探讨。

像素密度(PPI)

PPI(Pixel Per Inch),即表示每英寸有多少像素,类似于人口密度和建筑密度,如下图举例了几种PPI的表示。

移动端开发教程之像素的显示问题汇总

以iphone6为例,一般像素密度的计算公式为: Math.sqrt(1366*1366 + 640*640)

但是要计算这个PPI,那么我们先要知道设备的屏幕上到底有多少个像素,也就是Pixel Per Inch 中的第一个Pixel。

设备像素(DP)&& 设备像素比(DPR)

设备像素(Device pixel),也称物理像素(Physical pixel),也就是本文一开始提到iphone6的屏幕规格。像素密度中所指的像素就是设备像素,对于一般的显示设备来说,一个像素对应着屏幕上的一个发光点,因此PPI也称为DPI(dots per inch),但是这仅在显示设备上才等价,比如在打印机上就不一样了。

由于市面上每一台手机的屏幕规格不一样,有的是720P,有的是1080P,甚者是2K等等,这些设备的屏幕有些像素多,有些像素少,如果同样显示一个像素的话,则会出现像以下的情况:

移动端开发教程之像素的显示问题汇总

越高PPI的屏幕,显示一个像素点的面积就越小,一张由4x4个像素点组成的图显示在PPI为64的屏幕上,那么换到256PPI的屏幕上显示则会缩小为原来大小的一半。

反过来,如果要在PPI为256的屏幕上显示效果与PPI为64的屏幕一样,那么得要把图片放大2倍。

因此配有高清屏幕的手机,厂商为了其设备的可用性,即图标和文字可以被正确识别和准确点击,就必须保证各类素材在其设备上的显示与标清设备一样,而这个解决方法就是把所有尺寸都放大若干倍。这个放大比例就叫作设备像素比(Device Pixel Ratio, DPR),一般DPR对应着下面这个表:

  ldpi mdpi hdpi xhdpi
ppi   120   160   240   320  
dpr   0.75   1.0   1.5   2.0  

因此高清设备上应该配有高清图片显示,不然图片在高清设备上放大后没有足够的像素显示其细节,那么这张图片就会变得看起来很模糊。

CSS像素

讲了这么多概念,仿佛还是没有很好地解释文章开头的问题。下面讨论完CSS像素后估计大家会有一个比较清晰的概念。

我们通宵在写CSS的时候会用到像素单位px,但是这个像素单位并不一直是与设备像素一一对应,也就是说在CSS中1px(像素)不是对应着设备屏幕中的一个像素点。为了与设备像素区别,CSS中所指的像素px我们一般称为CSS像素。也就是说CSS像素是一个虚拟的、相对的单位。

移动端开发教程之像素的显示问题汇总

移动端开发教程之像素的显示问题汇总

例如在页面上画一个300px宽的块元素,在一般的显示器下它只会占屏幕的一部分,但如果我们手动地去放大页面,很快这个块状元素也会充满整个页面。由此说明,一般情况下CSS像素与系统分辨率下的像素大小相等,即在标清设备中,一个CSS像素应该是与一个设备像素大小相等的。但是是高清设备或者用户缩放的过程中,一个CSS像素也有可能等于多个设备像素。

移动端开发教程之像素的显示问题汇总

举另外一个例子,在移动原生应用开发中,如果必须以一个设备像素为单位进行开发,那将会是一件非常痛苦的事,因为不是每一台移动设备的系统分辨率都是对应着一个设备像素,有的是1:2,有的是1:2.46,正是因为有这种差异,在安卓开发中会有例如dp,dt这种单位(在iOS中会有pt单位),当我们给一个元素定义大小时,只需要给定一个dp值,系统将会根据这个值再与系统分辨率与设备像素的比值(即DPR)进行换算,最终计算出显示在屏幕上的实际设备像素。

更多相关推荐

【本文标题和网址】移动端开发教程之像素的显示问题汇总:http://yl6969.com/zhejiang/hangzhou/10449.html

资讯排行
搜索热点