jquery利用javascript获得浏览器宽度与高度

　　jquery利用javascript获得浏览器宽度与高度
利用jquery获得浏览器的高度与宽度，可以运用javascript内window对象。
javascript内window对象翻手册解释内容为：
---------------------
有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight document.documentElement.clientWidth

或者

document.body.clientHeight document.body.clientWidth

----------------------------------------
同时手册也给了保险的做法：

<script> var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; x=document.getElementById("demo"); x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。" </script>

--------------------------------------
OK，以上为手册内容，下面我们来做一个测试，一般我们使用jquery制作响应式页面或者做下拉式隐藏显示页面（例如我首页的那种，当然也只是小试一把）会用到，我首页主要是用到获得浏览器高度，然后根据滚动条滚动垂直位置(scrollTop)获得想要的效果。
好下面做一个测试页面来获得我们想要的测试结果。

<script language="javascript"> var height = window.innerHeight; var width = window.innerWidth; $(document).ready(function(e) {     $(".w").text(width);     $(".h").text(height); }); </script> <p>宽度:<font class="w"></font></p> <p>高度:<font class="h"></font></p>

点击下面附件链接查看使用jquery获得你浏览器窗口的宽度和高度：

 

 

好！那么问题来了，知道这几种浏览各是什么浏览器么？谷歌+IE+火狐+360+搜狗。那么你知道为什么各个的jquery获得的浏览器的高度宽度的值为何不同么？

浏览器窗口的全屏模式和小窗口模式都会获得不同值，通过刷新浏览器获得新的高度与宽度

TAGS:jquery , javascript , 浏览器 , 高度 , 宽度

来自Davids zhou博客原创文章请尊重作者：http://www.zongk.com/zongk/77.html转载请标注此链接