简易版viewport

Posted 2020-06-25 点点乐淘淘

首先这里涉及到虚拟像素和物理像素，不管是移动设备还是pc都存在这个概念
1、在显示器精度还不是很高的年代，一个物理像素就等于一个虚拟像素，1000px的网页就占据了1000的物理像素（如果你玩过小霸王，对这个应该有很直观的影响，上面的人物都是一个格子一个格子组成的）
2、随着显示器精度的不断提高，同等面积上能容纳多个物理像素点，如果还按照一个物理像素显示一个虚拟像素的话，1000px的网页看上去就会缩成一团
3、这样的网页显然没法看，为了解决这个问题，显示器生厂商把一个虚拟像素等同于了多个物理像素（这就相当于创建了一个虚拟的中间层，这个中间层向上对接网站中的像素，向下对接显示器的像素），这样网页就不会缩成一团了

理解了上面几点才能理解为什么会有viewport（viewport也就相当于创建了一个虚拟的中间层）
1、移动设备出来之前，网站都是针对电脑设置的，宽度起码都在七八百像素以上
2、移动设备的显示屏幕要比电脑小很多，如果要在上面浏览网站肯定会出现横向竖向的滚动条
3、为了让之前做的网站能在手机上正常显示（指不出现横向竖向滚动条），就需要创建一个中间层，于是苹果首先在Safari上创建了一个viewport属性
4、这个viewport就是虚拟的中间层，称为Layout Viewport（苹果设置这个中间层的宽度为980px，也可以是其他值，这由设备自己决定，根据项目经验个人认为这个值不固定，实际多大要看网页尺寸，当设置100%时就是980px，如果某一行元素超过了980px，超出的部分依然会缩到屏幕里去，但是设置100%的那行就不会撑满整行，980px以外的地方会显示空白），手机浏览器让这个中间层填满手机屏幕，不出现滚动条，最后再把网页渲染在这个中间层上，这样pc站就以缩小的形式完整的呈现在手机上了，带来的副作用就是字看不清了，必须通过手工放大才能看清
5、后来出现了针对移动端制作的网站，问题随之出现，网页被渲染到这个中间层上了，而这个中间层是专门为pc站而生的，于是就出现了这样一种情况，1000px的网页以缩小的方式完整的显示在屏幕上了，300px的移动网站同样以缩小的方式显示在屏幕上，剩下的700px就是空白了，太丑了
6、为了解决这个问题viewport中加入了几个属性，专门用来处理为手机做的移动站，width=device-width, initial-scale=1.0, user-scalable=no，意思就是让这个中间层的宽度等同于设备的宽度，而不是那个中间层的宽度，这样移动站就能完美显示了

通过上述分析，可以得出以下结论：
当pc站不加viewport时，在电脑上能看到一个完整清晰的网站，在手机上会显示一个缩小的版本，字体图片等都会相应缩小，没有滚动条
当pc站加了viewport时，在电脑上依然能看到一个完整清晰的网站，但在手机上就会出现一个有滚动条的网站，字体图片也都很清楚，一般情况下是不要这样做的
做移动站时一定要加上viewport，否则显示会出现问题，因为手机默认是以那个980px的中间层作为渲染基础的