简易版viewport

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

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

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