手机屏幕适配的一些基本概念

设备像素

设备像素又称物理像素（physical pixel），设备能控制显示的最小单位，我们可以把这些像素看作成显示器上一个个的点。（分辨率）

css像素

css像素是Web编程的概念，独立于设备的用于逻辑上衡量像素的单位，也就是说我们在做网页时用到的css像素单位，是抽象的，而不是实际存在的。

设备独立像素

也叫密度无关像素，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素（比如：css像素，只是在android机中css像素就不叫css像素而是叫设备独立像素），然后有相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系。

两者之间的关系

在一定的条件下它们两者是可以相等的，比如：在PC端浏览器默认情况下（100%，即页面没被缩放），一个物理像素=一个设备独立像素，而在移动端可就不一样的，这两个值很多时候是不相等的。为什么不相等，因为为了让你看起来更爽，爽在哪里？就是画质的精细度。即使它们有关系，但又不相等，那么总得有个说法或者公式吧？别急，在这之前，我们还得认识一个东西叫PPI

PPI又是个什么东西？总之它是个好东西，不然为什么各品牌的手机商开发布会时常常挂在嘴边。PPI全称是（pixel per inch）翻译下就是每英寸内有多少个像素点，这个像素点指的是设备像素点（物理像素），说的接地气点PPI就是像素密度。PPI的值越高，画质越好，也就是越细腻，看起来更有逼格。那么PPI是怎么计算出来的呢？

hxPixel: 横向屏幕像素（pixel）
zxPixel: 纵向屏幕像素（pixel）
pmcc: 屏幕尺寸（inch）

设备像素比

设备像素比 = 设备像素/设备独立像素 // 在某一方向上，x方向或者y方向

那么问题来了，什么是设备独立像素？
设备独立像素（DIP, device-independent pixel），简单地说来说设备独立像素就是：独立于设备的用于逻辑上衡量像素的单位。

逻辑上衡量像素的单位？这不是css像素吗？没错就是它。

设备独立像素就是css像素

如何获取

你可以通过JavaScript中的window.devicePixelRatio来获取设备中的像素比值。

视窗viewport

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

基本定义

简单的理解，viewport是严格等于浏览器的窗口。在桌面浏览器中，viewport就是浏览器窗口的宽度和高度。但在移动端设备上就有点复杂。

Viewport有几个属性你需要了解的

width: 控制 viewport 的大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）
height：与 width 相对应，指定viewport 高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：是否允许用户手动缩放。

三个视窗

Viewport虽然它只是一个单次，但它囊括了三个方面。是哪个方面呢？Viewport分为：视觉视窗、理想视窗、布局视窗。

视觉视窗

所谓的视觉视窗说白了就是设备的屏幕区域，换句话说就是用户通过屏幕所看到的页面内容。但它所对应的并不是指屏幕区域里的物理像素，而是css像素。并且它所包含的Css像素的数量也是随着用户缩放而有所改变。

理想视窗我们可以通过window.innerWidth | window.innerHeight来获得理想视窗对应的宽和高。

布局视窗

布局视窗和视觉视窗不一样，它不是指设备屏幕区域，它是为了解决PC端网页在移动端显示不佳的一个解决方案。布局视窗通常比设备的屏幕宽的多，一般为980px，但也不是唯一，在不同的浏览器中也会有所不同如：在Safari iPhone中布局视窗中的宽为980px,在Opera中布局视窗宽850px, 在Android Webkit中而布局视窗为800px,而在万恶的IE中布局视窗为974px.

我们可以通过document.documentElement.clientWidth | document.documentElement.clientWidth来获的布局视窗的宽和高。

注意：布局视窗的宽高值是在页面没添加viewport时所获得的值。如果你给页面添加了viewport并且设置了width=device-widhth时，通过上面的代码所获得的值就不是布局视窗的默认值了。

理想视窗

这个理想视窗是为了布局视窗而生的，为什么这么说，因为它是基于布局视窗的。它其实就是变了尺寸的布局视窗。理想视窗就是把布局视窗调整到合适的状态，让页面有最好的表面效果，这也是它名字的由来。设置了理想视窗用户就不再需要对页面进行缩放，因为浏览器已经帮你调整到最佳的显示状态了。而你要做的就是告诉浏览器，你要他这么做就ok了。就下面这一段代码就可以让浏览器乖乖地把布局视窗调整到最理想的状态

当然了，如果你的网站是PC端的或者没有响应式处理的。虽然布局视窗已经调整到最佳显示状态，但你所看到的网页还不是你想要的，因为整个PC页面都压缩到理想视窗大小了，内容基本看不清。所在理想视窗是会对于移动页面的，这个要在移动设备上才能看到效果，如果在PC上通过浏览器的设备模式查看的话页面是不会挤在一起的，你能看到的是页面的一部分，你可以通过滚动条来查看页面中的不同