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

作者:Davidszhou   来源:   时间:2016-09-04 21:45:36   点击:

  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获得你浏览器窗口的宽度和高度:

 

jquery利用javascript获得浏览器宽度与高度
文件类型: .html 70a591af586f6a8655ceea6fe1813471.html (714 Bytes)

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

 

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

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

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

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

七日热点
热力推荐
网站统计
文章总数:126
今天发布:1
软件资源数:17