关于viewport的一点自学

准备前端笔试，看到这样一题：

针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？

表示有阵子没编程了居然给忘了！故迅速查了viewport的相关内容，现理解如下：

viewport是指移动设备屏幕上显示网页的那一块区域，而网页本身可比移动端屏幕（或浏览器屏幕）大，也可比之小。由此，为了更好把PC端网页移植到移动端，引入三重概念，分为layout viewport,visual viewport和ideal viewport。

一、layout viewport

这是浏览器默认的viewport，宽度可通过document.documentElement.clientWidth获取。我们知道，一般PC端的网页肯定是比移动端屏幕大而且大很多，所以呈现在移动端屏幕上时，为了保证清晰度，肯定是显示不全的，故而产生滚动条。由于不同网页大小不同但差别不大，那么如何保证移动设备屏幕对这些网页都能清晰显示呢？显然，设备浏览器需要自己有一个默认的值，这个值与诸多PC端网页的大小差不多，从而保证大多PC端网页在移动设备上显示时，都能清晰显示。

该值往往取980px或1080px（不同移动设备有所不同），这就是layout viewport。

二、visual viewport

这个很简单，字面意思就是“可视区域”，就是指我肉眼看到的网页宽度，可比屏幕大，也可以比屏幕小~可通过window.innerWidth获取。

三、ideal viewport

重点来了！

直接将PC端网页显示在移动端，配合滚动条观看——好麻烦啊~而且很多时候字还是很小看不清啊~手癌晚期不想放大啊~肿么破？

所以程序猿们索性就为移动端专门写个网页不就好啦！嗯，好是好，问题来了：程序猿是在电脑上编程的，可市面上手机型号太多了，该怎样做，才能让viewport可以完美适配所有移动端？

这就是ideal viewport的由来。

ideal viewport需要满足两点：1.用户不缩放或没有横向滚动条就能查看网站的所有内容；2.清晰。ideal viewport根据设备不同而有不同尺寸。

总之，ideal viewport提供了这样一个标准：即只要是针对ideal viewport而设计的网站，无论在何种分辨率的屏幕下，不用缩放，没有滚动条，依然能够完美呈现给用户

说了这么多，到底怎样对viewport进行控制？利用meta标签

一般的编程时都会在head标签里这么写：<meta name = "viewport" content = "width=device-width,initial-scale = 1.0,maximum-scale = 1.0,user-scalable = 0">作用为：当前viewport宽度等于设备的宽度，同时不允许用户手动缩放

meta viewport有6个属性：width,innitial-scale,minimum-scale,maimum-scale,height,user-scalable。

分别为设置layout viewport的宽度、页面初始缩放值、允许用户的最小缩放值、允许用户的最大缩放值、layout viewport的高度，是否允许用户缩放。所以很好理解设置width = device-width。那么为什么还要写initial-scale = 1.0呢？

事实上，只写width = device-width，就行。

然而我还要告诉你，只写initial-scale = 1也行。

why？

因为这个页面初始缩放值啊，是针对ideal viewport缩放的……1表示缩放100%，2表示缩放200%……所以，值为1表示跟ideal viewport一样大，而值为2表示为ideal viewport的1/2……有个公式，叫  缩放值 = ideal viewport宽度/visual viewport宽度。只有当ideal viewport宽度等于visual viewport宽度时，才是用户最佳视觉效果哒！

so……两个都可以……为啥都要写捏？

其实就是兼容问题啦……只写width = device-width会有iphone,ipad横竖屏不分，只写initial-scale = 1 IE会横竖屏不分，故最完美写法，就是两个都写~

扯了这么多，再来看这个问题：

针对移动浏览器端开发页面，不期望用户放大屏幕，且要求“视口（viewport）”宽度等于屏幕宽度，视口高度等于设备高度，如何设置？

答：<meta name = "viewport" content = "width=device-width,initial-scale = 1.0,maximum-scale = 1.0">

（以上答案没有真的检验过，仅是根据资料自己推理得到，如有错欢迎指正~）

资料来源：http://www.cnblogs.com/2050/p/3877280.html