metaviewport的概念移动设备上的视口是屏幕上用来显示网页的区域，称为视口，但默认情况下，移动设备上的视口大于浏览器可视区域，因为移动设备的分辨率相对于电脑来说是比较小的，所以为了在移动设备上正常显示那些传统电脑浏览器设计的网站，移动设备上的浏览器会把默认的viewport设置为980px或者1024px，所以移动设备上的浏览器会有水平滚动条，因为浏览器可视区域的宽度小于viewportcss中的1px，而不是设备的1px。css中的像素只是一个抽象的单位，css中1px表示的设备物理像素是不一样的。在早期的移动设备中，屏幕像素密度较低，一个css像素确实是一个屏幕物理像素。当后来移动设备屏幕分辨率变高，但是屏幕尺寸不变的时候，这个时候一个css像素等于两个物理像素是的，所以多少个物理像素等于css像素是不确定的。三种视口布局视口：由于手机的分辨率越来越大，为了让手机显示电脑浏览器的正常网页，浏览器默认设置视口为980px或者1024px，这样，即使是那些专为桌面设计的网站也能在手机浏览器上正常显示，这就是布局视口，它的宽度可以通过document.documentElement.clientWidth来传递。视觉视口：因为布局视口的宽度大于浏览器可视区域的宽度，所以需要一个视口来表示浏览器可视区域的大小。这是可视视口，可以通过window.innerWidth获取。idealviewport:为移动设备单独设计，需要一个能完美适配移动设备的viewport，在没有用户缩放和水平滚动条的情况下可以正常查看网站内容。移动设备开发使用metaviewport控制viewport时，复制如下代码到head标签中：
