获取浏览器viewport分辨率

不知道其他人做H5页面用什么工具，我用的是著名的idangerous swiper。

不过该组件在适应移动端屏幕方面并没有什么好的方法（或许有，我没用过），只能给.swiper-container指定固定的宽度和高度。如下所示：

.swiper-container {
/* Specify Swiper's Size: */
width:320px;
height: 540px;
}
这样，如果某个手机浏览器屏幕不符合这个分辨率，就会显示不正常。

那自然想到可以用JS来动态改变.swiper-container的宽高来适应不同分辨率的屏幕。首先想到的就是利用screen对象的width和height属性来实现这个想法。

但是这两个属性获取到的值其实是整个显示器的分辨率，我们知道在手机上打开浏览器其实跟PC是一样的，它也有标签栏、状态栏什么的，除非你变态地每次都用全屏查看。
于是pass掉screen.width和screen.height。

然后我发现了screen.availWidth和screen.availHeight。
这是个好东西！

根据MDN的解释：
screen.availWidth和screen.availHeight是获取水平和垂直方向可用的屏幕像素数。

但是这里面有个坑，screen.availHeight是不包含windows系统任务栏的高度的。也就是说：
screen.availHeight = screen.Height - 任务栏高度

xp系统会减去windows任务栏默认30px高度.所以如果是800的高度会变成770;
win7的任务栏默认则是40px.所以是屏幕实际高度减去40;
另外任务栏也可以在屏幕上下左右任何位置的.所以availWidth也会去掉任务栏的距离

实际测试发现，在PC端使用这两个属性是没有问题，包括chrome的手机调试模式。
但用手机打开同样的页面时，这个两个属性值会远远大于你能看到的手机屏幕的尺寸，
那是因为现在的手机屏幕大多是高分辨率屏，同样的一块区域的实际像素数远比PC上要多。
于是又桑心滴pass掉。

搜啊搜，找到了window的另一个属性：window.innerHeight。

MDN的解释是：Height (in pixels) of the browser window viewport including, if rendered, the horizontal scrollbar.

同样，window.innerWidth是获取浏览器viewport的宽度（可能包含滚动条）。
这个貌似正式我想要的！

经过测试发现，利用这两个属性正好能达到我要的效果：

使用window.innerWidth和window.innerHeight来获取viewport的分辨率

总结：
通过预先获取window.innerWidth和window.innerHeight，可以轻易地搞定swiper的自适应效果。代码如下：