移动端各终端的适配问题研究--关于viewport

概念理解

• css像素与设备像素
  设备像素是我们直观看到的像素。这些像素为你所使用的各种设备都提供了正规的分辨率。来看一个栗子

  .test{
  width:100px;
  height:100px;
  background-color:#2CDD53;
  //zoom:200%;
  }
  给div设置一个的样式如上，当只设置宽高时，在普通的浏览器上显示的div宽高和设置的宽高时相同的，即css像素等于设备像素。当为div设置zoom放大后，div的css像素不变，但是div占据的设备宽高为200*200。所以，当对元素或者页面进行缩放时，设备像素和css像素是不同的。在缩放比为100%的情况下（zoom为1），一个css像素完全等一一个设备像素

  • 屏幕尺寸
    可以通过screen.width/height获取。它们包括用户屏幕的整个宽度和高度，它们的尺寸以设备像素度量的，所以一个设备的宽度和高度是永远不会变的。它们是显示器的属性，而不是浏览器的
• 窗口尺寸
  窗口尺寸是浏览器窗口的整体大小（包括滚动条），是通过css像素度量的，可以通过window.innerWidth/window.innerHeight获得。它告诉开发人员有多少空间可以用来做css布局。当用户放大的时候，这个值会减小。所以如果用户进行放大操作，在窗口中能获取的空间将会变小，window.innerWidth/window.innerHeight的值也变小。
• 滚动距离
  window.pageXOffset和window.pageYOffset包含了文档水平和垂直方向的滚动距离。这个属性