jQuery 获取屏幕高度、宽度的简单实现案例

 更新时间:2016年05月17日 16:22:57   投稿:jingxian  
下面小编就为大家带来一篇jQuery 获取屏幕高度、宽度的简单实现案例。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。

alert($(window).height()); //浏览器当前窗口可视区域高度 

alert($(document).height()); //浏览器当前窗口文档的高度 

alert($(document.body).height());//浏览器当前窗口文档body的高度 

alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin 

alert($(window).width()); //浏览器当前窗口可视区域宽度 

alert($(document).width());//浏览器当前窗口文档对象宽度 

alert($(document.body).width());//浏览器当前窗口文档body的高度 

alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin 

 

// 获取页面的高度、宽度

function getPageSize() {

  var xScroll, yScroll;

  if (window.innerHeight && window.scrollMaxY) {

    xScroll = window.innerWidth + window.scrollMaxX;

    yScroll = window.innerHeight + window.scrollMaxY;

  } else {

    if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac  

      xScroll = document.body.scrollWidth;

      yScroll = document.body.scrollHeight;

    } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari  

      xScroll = document.body.offsetWidth;

      yScroll = document.body.offsetHeight;

    }

  }

  var windowWidth, windowHeight;

  if (self.innerHeight) { // all except Explorer  

    if (document.documentElement.clientWidth) {

      windowWidth = document.documentElement.clientWidth;

    } else {

      windowWidth = self.innerWidth;

    }

    windowHeight = self.innerHeight;

  } else {

    if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode  

      windowWidth = document.documentElement.clientWidth;

      windowHeight = document.documentElement.clientHeight;

    } else {

      if (document.body) { // other Explorers  

        windowWidth = document.body.clientWidth;

        windowHeight = document.body.clientHeight;

      }

    }

  }    

  // for small pages with total height less then height of the viewport  

  if (yScroll < windowHeight) {

    pageHeight = windowHeight;

  } else {

    pageHeight = yScroll;

  }  

  // for small pages with total width less then width of the viewport  

  if (xScroll < windowWidth) {

    pageWidth = xScroll;

  } else {

    pageWidth = windowWidth;

  }

  arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);

  return arrayPageSize;

}

 

// 滚动条

document.body.scrollTop;

$(document).scrollTop();

以上这篇jQuery 获取屏幕高度、宽度的简单实现案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jquery 框架使用教程 AJAX篇

    jquery 框架使用教程 AJAX篇

    正好项目中准备使用thickbox,于是干脆抛弃prototype.js,看起jquery.js了。JQuery确实不错,体积比Prototype小了许多,而且使用起来更方便更灵活。有人说Prototype像JAVA,正统;而JQuery像Ruby,灵活,更趋于OOP。
    2009-10-10
  • jquery遍历json对象集合详解

    jquery遍历json对象集合详解

    这篇文章主要为大家详细介绍了jquery遍历json对象集合、jQuery 遍历JSON对象、jquery中遍历读取json串中的对象三种情况,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • Jquery性能优化详解

    Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,果断收藏当然不能忘了加上自己的一些总结及理解。
    2014-05-05
  • jQuery中on绑定事件后引发的事件冒泡问题如何解决

    jQuery中on绑定事件后引发的事件冒泡问题如何解决

    这篇文章主要介绍了jQuery中on绑定事件后引发的事件冒泡问题及解决办法,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-05-05
  • 以WordPress为例讲解jQuery美化页面Title的方法

    以WordPress为例讲解jQuery美化页面Title的方法

    鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下
    2016-05-05
  • 深入浅析jQuery对象$.html

    深入浅析jQuery对象$.html

    这篇文章主要介绍了jQuery对象$.html的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • 动态获取复选框checkbox选中个数的jquery代码

    动态获取复选框checkbox选中个数的jquery代码

    这篇文章主要介绍了jquery中动态获取复选框checkbox选中的个数的实现代码,需要的朋友可以参考下
    2013-06-06
  • 基于jquery实现手风琴效果

    基于jquery实现手风琴效果

    这篇文章主要为大家详细介绍了基于jquery实现手风琴效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04
  • Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael一个用于在网页中绘制矢量图形的Javascript库

    Raphael是一个用于在网页中绘制矢量图形的Javascript库,它使用 SVG W3C 推荐标准和 VML 作为创建图形的基础,你可以通过 JavaScript 操作 DOM 来轻松创建出各种复杂的柱状图、饼图、曲线图等各种图表,接下来详细介绍,感兴趣的朋友可以了解下哦
    2013-01-01
  • 一个可绑定数据源的jQuery数据表格插件

    一个可绑定数据源的jQuery数据表格插件

    此文将实现一个的jQuery表格插件jQuery.DataGrid。需要的朋友可以参考下。
    2010-07-07

最新评论