移动端适配概念区分

写在前面：

既然是移动端的适配，那么出现这个技术名词也肯定是有原因的，移动端适配所要解决的是手机快速发展，什么苹果、华为、等等还有啥锤子手机每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，这时候px如果写死的话就会出现视图挤压甚至没有显示的问题，谁也不想看到的东西只有一大半或者还要每一行都要左右拖动滚动条。

像素

首先要说的就是日常的手机是以对角线的长度就是这个屏幕的尺寸，320x480叫分辨率，而这个所谓的分辨率就是说白了就横向320个像素纵向480个像素组成，因此一般情况下分辨率是和屏幕大小相关的，1像素也就是屏幕上最小的一个颜色块，和计算房子的平米有些类似，由此必须要理解逻辑像素和物理像素。

1、物理像素（真实分辨率）

设备像素，在同一个设备上，它的物理像素是固定的，这是厂商在出厂时就设置好了的，即一个设备的分辨率是固定的。

2、逻辑像素（显示屏分辨率）

CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。

3、像素比

物理像素与逻辑像素之间的比例。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。

4、CSS中的1px并不等于设备的1px

在CSS中一般使用px作为单位，在Web浏览器中CSS的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成一个错觉，那就是CSS中的像素就是设备的物理像素。但实际情况却并非如此，CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的设备物理像素是不同的。

在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320480，在iphone3上，1个CSS像素确实是等于1个物理像素的。后来随着技术的发展，移动设备的像素越来越高，从iphone4开始，推出了所谓的Retina屏，分辨率提高了一倍，变成640960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，1个CSS像素是等于4个物理像素的。

5、实现真正的1物理像素

当viewport的属性initial-scale为1时，页面大小正常，但initial-scale为0.5时，页面被缩小了1倍，像素比为2:1的设备本来1个CSS像素宽度占2个物理像素宽度，缩小后的1个CSS像素宽度就只占1个物理像素，即实现了真正的1物理像素

视口

1. layout viewport 布局视口
在PC端的网页的layout viewport即浏览器页面显示的整个区域，也可以理解成网页的绘制区域。而在移动端由于其屏幕较小，无法全部显示PC端页面的全部内容，所以默认情况下(不用去控制)，移动端会指定一个大于其浏览器显示区域layout viewport，一般是980px，在chrome浏览器上的实验结果，未进行视口控制的页面的默认宽度为980px，即页面在宽度为980px的页面上进行了绘制。

2. visual viewport 视觉视口
visual viewport，顾名思义指浏览器可视区域，即我们在移动端设备上看到的区域。为了区别其和layout viewport的区别，网页的实际绘制区域视口大小layout viewport比我们在手机上可以看到的大小要大，所以我们手机端视觉视口会出现横向滚动条。

3. ideal viewport 理想视口
所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone的理想视口宽度都为320px，安卓设备的理想视口有320px、360px等等。
也就是说移动端的适配就是在确定了像素比的情况下把布局视口大小的网页完美的放在视觉视口上，相当于根据一个已经写好的网页，然后等比例或者使用其他适配方案把页面完美的显示在不同大小的手机屏幕上，等比例压缩或者舒展。从而让页面大小自适应