设备像素
设备像素(Device Pixels):设备屏幕的物理像素,单位是 px
,比如 iPhone6 的 750x1334px
P.S表示屏幕上有多少个点点,而不是绝对长度单位(例如 in
,mm
),因为我的点点和你的点点大小不一样
分辨率
分辨率(resoluteution),也是一个物理概念,含义要看对谁
对于屏幕,分辨率一般表示屏幕上显示物理像素的总和。比如我们说 iPhone6
屏幕分辨率是 750x1334px
对于图像,概念等同于图像的尺寸、图像大小、像素尺寸等、比如,我们说 20x20
的 icon
P.S其实严格来说,图像分辨率是 ppI (Pixels Per lnch),对于一个图片文件,其像素尺寸是一定的,可能含有来自相机的 meta
信息,比如分辨率 200ppi
,该值只是一个建议值,图片显示出来我们看到尺寸,是由屏幕像素密度决定的,像素密度越高,图片看起来越小
CSS像素
Css像素(Css Pixels):是Web编程的概念,指的是Css样式代码中使用的逻辑像素
所以,1个Css像素在不同设备上可能对应不同的物理像素,这个比值是设备的属性(Device Pixel Ratio,设备像素比)
在 Css 规范中,长度单位可以分为相对单位和绝对单位,px 是一个相对单位,相对的像素设备(Device Pixels)。比如 iPone5 使用的是 Retina 视网膜屏幕,用 2x2
的 Device Pixels 代表,1x1
的Css Pixel,所有像素设备为 640x1136px
,而 Css 逻辑像素数为 320x568px
设备像素比
设备像素比缩写为 DPR 或者 DPPX,如下
1 | - Device Pixel Ratio: Number of device pixels per CSS Pixel |
一般我们说DPR,wiki 定义:
1 | Device pixel ratio, the ratio between physical pixels and logical pixels used by cascading style sheets (CSS): other names for it are “CSS Pixel Ratio” and “dppx” |
所以,设备像素比表示1个 Css 像素 (宽度)等于几个物理像素(宽度):
DPR = 物理像素数 / 逻辑像素数
比如 dpi = 2 时,一个 Css 像素由4个物理像素点组成,见上面对 Css 像素理解 P.SDPR不是单位,而是一个属性名,比如在浏览器中通过 window.devicePixelRatio
获取屏幕 DPR
特别注意:
window.devicePixelRatio
是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。公式表示就是:window.devicePixelRatio = 物理像素 / dips
这里的“设备独立像素”,指的就是逻辑像素,即 Css 像素,也是一个属性名,不要和 Android 的单位 dip/dp
弄混了,二者没有任何关系,虽然英文一样,含义也差不多,但那是 Android 自家的事情,不通用
像素密度
像素密度也叫显示密度或者屏幕密度,缩写为 DPI(Dots Per Inch)或者 PPI (Pixel Per Inch),含义相同
专业一般来说PPI,细微差异如下:
ppi和dpi(每英寸点数)。从技术角度说,“像素”(p)只存在于计算机显示领域,而“点”(d)只出现于打印或印刷领域。
经常看到相同尺寸的屏幕像素尺寸却不同,也就是DPI的差异,比如4.7英寸的iPhone6像素尺寸为750x1334px
,而4.7英寸的HTC One像素尺寸为1080x1920px
像素密度很容易算出来,比如 iPhone6 的:
// 屏幕对角线的像素尺寸 / 物理尺寸(inch)
Math.sqrt( 750 x 750 + 1334 x 1334 ) / 4.7 = 326ppi
生活案例:
Windows 设置分辨率修改的应该就是
像素密度( 像素密度是一个属性,固定不变,因为屏幕物理像素尺寸和物理尺寸都是固定的)设备像素比,所以同一张图片在不同分辨率设备上的显示尺寸不同,像素设备像素比越低,逻辑分辨率越高(dpr=1
时逻辑分辨率=物理分辨率),图片显示尺寸越小(用尺子量屏幕),比如Windows1920x1080
分辨率下桌面图标/字体都比1366x768
下要小些。而图片浏览工具能放大一张图片,实际上是通过软件插值模拟像素数据增加了宽高像素数量,所以放很大时会不清晰(失真),缩小也存在这样的问题在输出的最后时刻:比如显示、或打 印、或冲印时的 DPI 设置,才是最后决定输出尺寸大小的关键设置,机身形成文件所标示的什么
180DPI
或72DPI
都只是一种设定好的临时参数。所以洗照片可以有寸照、2寸照等等相机中 EXIF 显示的 DPI 或者 photoshop 中显示的 DPI 只是相机随便假设你的最终输出的对象的一个数据,因为相机和 PS 都不知道你最终用的打印机是什么DPI,也不知道你是不是就是为了放在网络上,所以就随便假设了一个数,其实没有任何的意义
独立设备像素
一般指 Google 提出的用来适配 Android 海量奇怪屏幕的,Windows 也有这个概念,但含义不同,IOS 好像没有设备独立像素一说
设备独立像素作为单位,一般是指 Android 开发中的东西,缩写为 DIP(Device Independent Pixels)或者DP(Density-independent Pixels),含义完全一致
Android设备的特点是屏幕尺寸很多,因此为了显示能尽量和设备无关,提出了dip,参照的density是160。计算公式为:
// 当屏幕密度为160(单位是ppi或者dpi,一个意思)时,
px === dip px = dip * density / 160
// 所以 dip = px * 160 / dpi
当然,则两个式子都只适用于 Android 设备,这个 dip
拿到其它地方去没什么意义
视口(viewport)
桌面上视口宽度等于浏览器宽度,但在手机上有所不同。
布局视口
- 手机上为了容纳为桌面浏览器设计的网站,默认布局视口宽度远大于屏幕宽度,为了让用户看到网站全貌,它会缩小网站
视觉视口
- 屏幕的可视区域
理想可视口
当网站是为手机准备的时候使用。通过meta来声明。早期iPhone理想视口为
320x480px
所以,在没有缩放的情况下,屏幕的CSS像素宽度其实是指理想视口的宽度,而
meta
标签:
指定了布局视口=理想视口,并且禁止缩放。所以添上width=device-width
的viewport meta后页面变大了(一开始页面内容小得看不清),实际上是布局视口变小了