移动端web开发——视口

<meta name="viewport" content="width=device-width,initial-scale=1">

• 设备像素：设备屏幕的物理像素，任何设备的物理像素的数量都是固定的。
• CSS像素：为Web开发者创造的，在CSS（和JavaScript）中使用的一个抽象的层。
  说明一下：web开发过程中，我们基本使用的都是CSS像素，设备像素基本不会用。例如：width:200px 的元素跨越了 200 个CSS像素。CSS像素相当于多少个设备像素取决于屏幕的特性（是否高密度）和用户进行的缩放。当用户放大的越大，一个CSS像素覆盖的设备像素就越多，因此这个元素不一定会跨越css设置等值的设备像素。
  三个视口
  1、理想视口
  代码中 device-width 的值就是理想视口的宽度，三个视口中，只有理想视口的尺寸是不能改变的，由设备和浏览器决定，与设备的物理像素数存在着比例关系，这个比例就是设备像素比（device pixel ratio， dpr），即有 设备像素比 = 物理像素数 / 理想视口尺寸，举例iphone5屏幕横向有640个物理像素，其理想视口宽为320，则 dpr=2，可以使用window.devicePixelRatio获得dpr。
  2、可视视口（visual viewport）
  是指用户可见页面区域，其宽度值为横向可见CSS像素数，从另一个角度理解，可视视口的宽度决定了将屏幕横向分为多少份，每份对应一个CSS像素，使用window.innerWidth 可以获取到可视视口的宽度。
  因此用户手动缩放和在 meta 标签中设置 initial-scale 的值都会改变可视视口的尺寸，可视视口的尺寸越小即显示的CSS像素数越少，则单位CSS像素对应的可使区域越大，对应的缩放比也就越大。
  缩放比例是相对于理想视口而言的，即有 缩放比例 = 理想视口尺寸 / 可视视口尺寸。
  3、布局视口layout viewport
  就是移动设备上用来装载我们的整个网页的那一块区域。