移动端基础

1.物理像素

在移动设备上的最小物理显示单元。如，iphone6的物理像素为750*1334。

2.逻辑像素

css中逻辑像素px，可以认为是一个“参考像素”。大小不固定，可以放大和缩小。如PC端上的网页放到手机端浏览时，每个px占的空间缩小，从而整个网页缩小。

2.设备独立像素（dip)

也叫密度无关像素，跟设备的硬件像素无关的，是设备上的一个逻辑单位像素，在iphone6中，一个dip等于4个物理像素。

3.设备像素比(dpr)

是指物理像素与设备独立像素比。如iphone6的物理像素为750*1334，设备独立像素为375*667，设备像素比为2， 相当于一个dip占四个物理像素。

4.像素密度(ppi)

每英寸拥有的物理像素的个数，ppi越高，画面越精密。

5.布局视口与视觉视口

手机上为了容纳为桌面浏览器设计的网站，默认布局视口宽度远大于屏幕宽度，然后缩小布局视口的网页，在视觉视口上显示网站的全貌，视觉视口是物理屏幕上的可视区域。

6.viewport

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

device-width表示设备独立像素的宽度。

通过width设置布局视口的宽度，布局视口的宽度＝屏幕的设备独立像素的宽度＝视觉视口的宽度，此时一个css像素对应一个设备逻辑像素。intial-scale=1,表示初始不缩放网页，缩放为1，maxinum-scale表示最大缩放为1，即页面不能放大，user-scalable=no不允许用户手动缩放页面。

通过上面代码的设置，一个css像素对应一个设备逻辑像素，且布局视口与视觉视口的宽度相同。如iphone6，在375px宽的布局视口上布局网页，在相同宽度的视觉视口显示网页，没有缩放。