关于手机屏幕

屏幕尺寸：

手机对角线的物理尺寸比如5寸6寸这种…

屏幕分辨率：

手机在横向、纵向上的像素点数总和（可以理解成真实长宽，即设备的物理像素，即设备像素，是固定的>。一般被描述成屏幕的宽X高比如1080X1920。那么分辨率其实是乘起来的那个结果！

4K屏指像素大概为4_（1024_ 540），8K屏同理。所以4k8k只表示像素点多少，并不表示密度。

屏幕像素密度dpi或ppi(dots per inch/ pixel per inch)：

表示设备像素与设备尺寸的关系，意义为每英寸的像素点数。

A: 假设一部手机的分辨率是1080x1920（px），屏幕大小是5寸，问密度是多少？
Q: 2203px（由勾股定理求得的对角线的像素点数）/5寸（对角线尺寸） = 440dpi

ppi与dpi的细微差异如下：

从技术角度说，“像素”(p)只存在于计算机显示领域，而“点”(d)只出现于打印或印刷领域。

dpi一定是固定值，因为这是屏幕的属性，屏幕的物理像素尺寸和物理尺寸都是固定的。
何谓retina显示屏？凡是肉眼看不见物理像素点的都可以称之为retina屏，大概是360ppi+。许多人会说“因为iPhone是retina显示屏，所以dpr为2或3..”，这句论断在我以为是不成立的。retina指的是屏幕的属性，而设备像素比dpr代表的完全是另一码事，下面会讲到。

密度无关像素dp：

给安卓的，可以保证在不同屏幕密度上的设备显示相同的效果。以屏幕分辨率为320*480的为基准：1dp = 1px，那么以此类推，780分辨率的1dp = 2px；1080分辨率的1dp = 3px。
//感觉就像是自动计算html的font-size的rem呀！

css像素/逻辑像素：

1个CSS像素在不同设备上可能对应不同的物理像素数。
不论我们进行缩小或放大操作，元素设置的CSS像素(如width:300px)是始终不变的，而一个CSS像素对应多少个设备像素是根据当前的缩放比例来决定的。
css像素的px是一个相对单位，相对的是设备像素（Device Pixels）。比如iPhone6用2x2的Device Pixel代表1x1的CSS Pixel，所以设备像素数为750x1136px，而CSS逻辑像素数为375x568px。
开发时一定是按照css像素来算的，不用理会物理像素。如若在上述背景下，ui给的是750px物理像素下的图，那么开发时都按各项长度/2来计算就好了。

设备像素比dpr：

表示设备像素与css像素的关系，意义为没有缩放情况下，设备像素与css像素的比值，即1个CSS像素（宽度）等于几个物理像素（宽度）。比如iPhone6下：screen.width为375px，取得window.devicePixelRatio为2，∴ iphone6的设备像素为750*纵向同理算。

在JavaScript中，可以通过window.devicePixelRatio获取到当前设备的dpr。而在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询。如@media screen and (-webkit-min-device-pixel-ratio: 2) {}。
我个人觉得，dpr唯一值得引起开发者注意的地方就是高dpr设备下图片可能不清晰的问题。一般倍率@2是主流，所以一般准备2倍大小的图。可是一些方案会对x2dpr的屏幕也作字号x2处理，对于这方面我的认知还有待完善。

视口viewport:

桌面上视口宽度等于浏览器宽度，但在手机上有所不同。

布局视口: 手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，为了让用户看到网站全貌，它会缩小网站。
视觉视口: 屏幕的可视区域，即物理像素尺寸。
理想视口: 当网站是为手机准备的时候使用，通过meta来声明。早期iPhone理想视口为320x480px。在没有缩放的情况下，屏幕的CSS像素宽度其实是指理想视口的宽度，而meta的name=viewport标签，起到的正是指定理想视口大小的作用。