论浏览器移动端视窗与布局

in:inches的缩写,英寸。就是屏幕的物理长度单位。一英寸等于2.54cm。比如Android手机常见的尺寸有5寸、5.5寸、6寸等,这里的长度都是指手机对角线的长度。

ppi像素密度:每英寸多少像素数;ppi = √(长度像素数^2+宽度像素数^2)/屏幕尺寸

lpi(线每英寸)

dpi:点每英寸

DP:设备像素(物理像素);由厂商制定,不同厂商的标准不一样;单位pt;ptcss单位中属于真正的绝对单位,1pt = 1/72(inch),inch及英寸,而1英寸等于2.54厘米

DIP(density- independent pixel),dp:设备独立像素(这是Android中的叫法,就是web开发中CSS像素),也称为逻辑像素;CSS像素 =设备独立像素 = 逻辑像素;可以用来辅助区分视网膜设备还是非视网膜设备;与屏幕密度(硬件)有关

dpr:设备像素比;DPR = 物理像素 / 设备独立像素;一般是ppi/160的整数倍;devicePixelRatio = 物理像素 / 独立像素

 

所有非视网膜屏幕的iphone在垂直的时候,宽度为320物理像素,当你使用;

<meta name="viewport" content="width=device-width">

 的时候,会设置视窗布局宽度(不同于视觉区域宽度,不放大显示情况下,两者大小一致)为320px, 于是,页面很自然地覆盖在屏幕上。

而对于视网膜屏幕的iphone,如iphone4s, 纵向显示的时候,屏幕物理像素640像素。同样,当用户设置

<meta name="viewport" content="width=device-width">

的时候,其视区宽度并不是640像素,而是320像素,这是为了有更好的阅读体验 – 更合适的文字大小。

这样,在视网膜屏幕的iphone上,屏幕物理像素640像素,独立像素还是320像素,因此,window.devicePixelRatio等于2

从以上现象得出的结论是:
UI设计师按照手机物理像素出设计稿,切图时根据其设备像素比来换算设备独立像素(CSS像素),比如视网膜手机iPhone6,物理像素750px×1334px,由于其设备像素比为2,CSS切图时需要将设计稿的所有尺寸除以2,才是正确CSS像素值。

 

注意,我们通常所说的显示器分辨率,其实是指桌面设定的分辨率,而不是显示器的物理分辨率。只不过现在液晶显示器成为主流,由于液晶的显示原理与CRT不同,只有在桌面分辨率与物理分辨率一致的情况下,显示效果最佳,所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了

屏幕普遍采用RGB色域(红、绿、蓝三个子像素构成),而印刷行业普遍使用CMYK色域(青、品红、黄和黑)

分概念:

visual viewport:视觉视口;物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕,像素密度大的设备,硬件像素会更多

 

layout viewport:布局视口;

 

ideal viewport:理想视口;

DIP

猜你喜欢

转载自www.cnblogs.com/chargeworld/p/12229448.html
今日推荐