近日遇到网页在移动端浏览器的适配问题，查了不少资料依然比较迷糊，网上大多浅谈则止，心中疑惑求解。经过几天反复测试，现谈谈的我目前理解，望大家不吝指正。
-
基础知识
布局视口、视觉视口、理想视口的相关概念网上讲得比较多，请自行搜索。参见
-
PC端的网页究竟怎样在移动端显示？
由于移动端屏幕较小，大多数设备的宽度在400像素（设备独立像素）左右，而为PC端设计的网页往往比这个数值大得多（基本都在800像素以上），这就导致在手机屏幕上看这些网页时屏幕肯定显示不完，大家想像的正常情况就是显示不完的部分通过滚动条滚动浏览，但这样的体验很不好。移动端浏览器为了更好的体验提供的解决办法是：把PC端网页按照原来的大小进行渲染，然后整体进行缩小，缩小到刚好手机屏幕能完全显示所有的内容。所以我们在手机上看到的没有经过适配过的网页都变小了，甚至很多字太小根本看不清楚，这时用户是可以通过手指进行放大查看，但放大后必然会出现滚动条。
-
具体怎样缩放？
上一问中由于布局视口（网页实际内容的大小）比视觉视口（屏幕的大小）大，为了完整显示网页，移动端浏览器把布局视口进行了缩小。显然不同大小的网页缩小的倍数不一样，比如手机宽度是400px，网页是800px的话就缩小一倍，如果网页是1200px的话就缩小2倍，这样就刚好能在手机上完整显示所有内容。是不是可以无限缩小？答案是否定的。经过反复实验，以我的mate20上安装的edge为例，缩小的极限大概是4倍，同样实验放大的极限大概是5倍。
-
超出缩小极限时怎么显示？
首先以极限倍数缩小，但网页肯定显示不完，这时会出现滚动条，通过滚动条查看视口外的内容。
-
980px的布局视口是什么？
很多网上的文章中提到移动端会默认提供一个的980px的布局视口，我最大的疑惑也是来源于此。也就是说移动端浏览器默认我们制作的网页宽度就是980px，然后把980px宽度的网页缩小到屏幕的大小。但是如果实际的网页不一定刚好这么宽，如果比980px大怎么办呢？这就是网上文章没有交待清楚的地方。其实也可以想象，如果网页的宽度大于980px，布局视口的大小就变成了网页的实际宽度，因为如果还是980px，那超出的部分就只有不渲染，不显示了，而实际上是要渲染显示的。就比如给你提供了一张纸绘画时，当你画的内容比这张纸宽时，只有在这张纸的右边再添加一纸合适宽度的纸。如果实际网页的内容比980px窄是什么情况？布局视口仍然为980px。也就如你一张纸绘画，但你画的内容只有这张纸宽度的一半，浏览器不会剪掉没用的部分，会保留整张画布，将整张画布显示在屏幕上，剩余的空间作为留白。
-
怎样实现理想视口？
为了给用户更好的体验，用户在手机上浏览时内容不应出现滚动条，也不应对显示内容进行缩放，这就是我们理想状态。怎样实现呢？我们在设计网页样式的时候，把网页的宽度设置和屏幕的宽度相等，并同时禁止屏幕缩放。这就是我们为什么要在网页加上以下代码的原因。
1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -
网页怎样去自适应不同大小的屏幕？
width=device-width可以将布局视口的大小设置来和屏幕一样宽，如果你在网页中硬是插入比屏幕更宽的元素，那么就画布（布局视口）就只有变大，浏览器出现滚动条，width=device-width就失去了意义，所以我们在网页中插入的元素要注意不要超过屏幕的宽度。每个设备的屏幕宽度不尽相同，那我们在怎样保证布局时的布局元素不超过屏幕宽度呢？关键就在于布局时最好采用百分比，不要采用PX，这样保证布局时的DIV元素宽度刚好是屏幕的100%。而且这样的布局方式可在保证在不同大小的移动终端上各部分在屏幕上显示的比例一致，也就达到了自适应屏幕的目的。具体的实现方法网上较多，这里不作探讨。
-
仍有疑惑待解
document.documentElement.clientWidth在移动端应该是返回整个文档的宽度，也就是ppk所定义的layout viewport（布局视口)的宽度。但为什么当网页实际宽度大于980px时，经测试返回值仍是980，按理应当以实际的宽度为返回值啊！望大神指点!
