手机页面视口的问题大家都遇到过。关于viewport的文章很多，推荐这两篇文章给大家，讲的很详细。移动端适配方案（上）移动端适配方案（下）本文对viewport做一些补充手机屏幕手机屏幕是一个硬件属性，我们不能通过JS或者meta标签去影响它。手机屏幕的物理像素，也就是手机厂商所说的像素、分辨率、PPI。Android常用的有720X1280、1080X1920等，iPhone为iPhone5640X1136、iPhone6750X1334、iPhone6P1080X1920手机屏幕逻辑像素，物理像素换算后的像素数。即理想视口iPhone5屏幕的尺寸本来是640px宽，但是换算成320pxiPhone6物理像素750px，换算成375pxiPhone6P有点诡异，物理像素居然是1080px宽，但是系统暴露了外面确实是1242px，然后转换成414pxscreen.width/height就可以得到屏幕的逻辑像素布局viewport。刚才layoutviewport说的屏幕的物理像素和逻辑像素是由手机厂商设置的。我们无法设置它们。重点是接下来的两个Viewport，大家不要搞混了。布局视口相当于浏览器的宽度。我们可以通过来设置。默认情况下，布局视口一般为980px宽。document.documentElement.clientWidth可以获取布局视口的宽度。可视视口可视视口可以看做是一个和手机屏幕一样大的窗口，但是它能显示的像素数却没有屏幕上逻辑像素数那么多。visualviewport不好理解，虽然手机屏幕的逻辑像素已经固定，比如iPhone5就是320px。但是屏幕是320px宽，却可以显示980px宽的内容，所以可视化窗口的宽度是980px。很多不适应移动端的网页，我们用手机打开，发现网页被缩小到手机屏幕的宽度。重点是缩放，缩放可以让320px的屏幕显示更多的内容。window.innerWidth可以获得视觉视口的宽度。视觉视口的宽度可以通过设置。视觉视口的宽度是screen.width/initial-scale。同时也会影响布局视口的宽度，因为布局视口的宽度总是大于等于视觉布局的宽度。如果未设置initial-scale，iOS设备会自动将视觉视口缩放到与布局视口相同的大小。还记得默认布局视口的宽度吗？屏幕逻辑像素、布局视口、视觉视口的关系width=640">设置布局视口宽度为640px（逻辑像素，不是物理像素）设置视觉视口为屏幕宽度的2倍（正确的理解是：视觉视口的0.5倍是屏幕宽度，所以视觉视口的宽度是屏幕宽度的两倍）。此时布局视口的宽度也是屏幕宽度的两倍，而不是默认的980px。总结：1、默认布局视口为980px2，width=x设置布局视口，initial-scale=y设置视觉视口3、如果只设置布局视口和视觉视口其中一个，另一个也是宽度相同4，布局视口的宽度总是大于或等于视觉视口。比如在iPhone5上，那么视觉视口和布局视口分别有多宽呢？？最后，终于到了我们熟悉的。每个人都知道这意味着什么。布局视口浏览器窗口，设置为屏幕宽度。visualviewport也设置为屏幕宽度，不缩放，显示多少像素和屏幕一样宽。这就是所谓的完美视口。
