浏览器的宽高获取

认识一下浏览器

这里有几个元素，我们拆分开：

1. 浏览器(不包含底边任务栏的）
2. 浏览器显示内容的，不包括浏览器中的导航栏和搜索框等的
3. 浏览器的内容区域，不包括旁边滑动栏的
4. 浏览器的内容可视区域，不包括旁边滑动栏的以及需要下滑的内容区域的

其实归根结底，就两个元素我们比较在意：width 和 height；后面的所有只不过是加前缀而已

那么，我们需要重新认识几个元素
1 html
看图片左下角,html = 1903*2015
所以 html是不包括滑动栏的内容区域，它的高是包括下面没有显示出的内容的

2 body
可见 body = html

3 然后，我们用像素尺子，测量一下我们的一些其他元素
底边任务栏，大概40px;
上边的一些导航栏啊什么的，大概是100左右，为了精确，我们换算一下；
首先，我的屏幕是19201080
百度首页的body是1920937
937+40=977 ； 1080-977=103
得出结论：
1 浏览器的上边导航栏等：103px
2 底边任务栏：40px

然后我们再来认识几个元素：
1 document

很显然，document是我们的文档流，包含一切
截至目前，我们应该了解了以下几个元素

• html
• body
• document
• 底边任务栏
• 浏览器上边导航栏

接下来，我们再来认识几个元素
client,inner,scroll,screen

通过上图基本就清楚了；这里我们其实会比较常用两种情况
1 浏览器的可视内容区域：
window.innerWidth 可视区域宽度（含滑动栏）
window.innerHeight 可视区域高度（多余内容不显示，眼睛能看到的）

2 浏览器包含的内容，就是可以滑动的
所有body类的都是
document.body.xxx都是的