1.视口的概念PC端的视口其实就等于浏览器窗口，拥有浏览器窗口的宽和高。元素使用100%的视口宽度（如果不是手动设置html元素宽度的情况）。使用document.documentElement.clientWidth获取视口的宽度。使用document.documentElement.offsetWidth获取元素本身的大小。移动端分为视觉视口、布局视口和理想视口。有关视觉视口和布局视口的解释，请参阅文章两个视口的故事（第2部分）的视口部分。有关理想视口的解释，请参阅元视口（视口元信息标签）。理想的视口大小由设备本身决定。CSS布局，尤其是百分比宽度，是使用布局视口作为参考框架来计算的。所以元素最初使用布局视口的宽度。缩放时（如果放大，屏幕上的CSS像素会变少），视觉视口（即当前显示在屏幕上的页面部分）的大小发生变化，布局视口的大小保持不变和之前一样。（如果不这样做，您的页面将按照重新计算百分比宽度的频率进行重新布局。）使用document.documentElement.clientWidth计算布局视口的宽度。使用window.innerWidth/Height或document.documentElement.offsetWidth计算视觉视口的宽度使用document.documentElement.offsetWidth计算元素的大小。二、viewportmeta标签viewportmeta标签用于设置布局视口的宽度。initial-scale=1visualviewportwidth=idealviewportwidth/zoomfactor设置initial-scale的规则实际上做了以下两件事：1.设置页面的初始缩放因子为给定值，根据idealviewport计算视觉视口的宽度。2.设置layoutviewport的宽度等于刚才计算的visualviewport的宽度。注意：对于IE，它将获得错误的理想视口（320x320而不是320x480），并将任何值视为1，因此初始比例在IE上采用什么值无关紧要。initial-scale=1可以将布局视口的值设置为理想视口的大小。IE10横向模式和纵向模式的宽度是纵向模式下理想视口的宽度。在width=device-widthwidth规则下有一个特殊的值device-width。通过设置width=device-width，布局视口（layoutviewport）的宽度可以等于理想视口（idealviewport）的宽度。在iPhone和iPad上，不管是竖屏还是横屏，宽度都是竖屏时理想视口的宽度。initial-scale=1andwidth=device-width1，使用width=device-width和initial-scale=1两条规则，可以将layoutviewport的值设置为idealviewport的大小。2、所有缩放规则都是相对于理想视口而言的，与布局视口的宽度无关。所以maximum-scale=3的意思就是页面最多可以放大到理想视口的3倍。widthandinitial-scale=1当width和initial-scale=1冲突时，使用最大宽度的原则（横屏和竖屏模式下）解决，即取宽者。3.设备像素和CSS像素之间的转换就是如何生成每英寸像素（pixelperinch）ppi，表示每英寸的像素数。值越高，显示的密度越高。显示图像。ppi的计算方法可以参考维基百科的pixelperinchdevicepixelratio（设备像素比）。上面计算ppi是为了获取密度边界，获取默认的缩放比例，即设备像素比例。从上图可以看出，ppi在120-160之间的手机属于低密度手机，160-240属于中密度手机，240-320属于高密度手机，320以上属于超高密度手机（苹果给它起了个高大上的名字——Retina）。得到设备像素比后，就可以得到设备像素与CSS像素的比值。当此比例为1:1时，使用1个设备像素显示1个CSS像素。当比例为2:1时，使用4个设备像素来显示1个CSS像素，当比例为3:1时，使用9（3*3）个设备像素来显示1个CSS像素。4.缩放的本质难怪现代浏览器实现缩放的方式都是“拉伸”像素。假设你为一个元素设置了width:128px，而你的显示器是1024px宽，当你最大化你的浏览器屏幕时，这个元素将在你的显示器上显示8次（可能是这样；我们暂时忽略那些微妙之处）。如果用户缩放，计算将会改变。如果用户放大到200%，你的宽度为128px的元素在1024px宽的显示器上只会重复4次。元素的宽度没有从128像素修改为256像素，元素仍然是128CSS像素宽，尽管它占用了256设备像素的空间。参考自：两个视口的故事（上）两个视口的故事（下）Metaviewport（视口元信息标签）
