标签：浏览器 视窗 分辨率 像素 屏幕 移动 设备 CSS 物理

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

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

lpi（线每英寸）

dpi：点每英寸

 

 

 

DP：设备像素（物理像素）；由厂商制定，不同厂商的标准不一样；单位pt；pt在css单位中属于真正的绝对单位，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

标签：浏览器,视窗,分辨率,像素,屏幕,移动,设备,CSS,物理
来源： https://www.cnblogs.com/chargeworld/p/12229448.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。