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

所属分类: 网络编程 / JavaScript 阅读数: 673
收藏 0 赞 0 分享

做手机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-data的三种用法

本篇文章主要介绍了Jquery-data的三种用法。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序实战之自定义toast(6)

这篇文章主要为大家详细介绍了微信小程序实战之自定义toast的相关方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序--onShareAppMessage分享参数用处(页面分享)

本篇文章主要介绍了微信小程序的页面分享onShareAppMessage分享参数用处的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序实战之自定义抽屉菜单(7)

这篇文章主要为大家详细介绍了微信小程序实战之自定义抽屉菜单效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传

本篇文章主要介绍了微信小程序开发之从相册获取图片--使用相机拍照,本地图片上传的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

JavaScript错误处理和堆栈追踪详解

这篇文章主要为大家详细介绍了JavaScript错误处理和堆栈追踪的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序开发之麦克风动画 帧动画 放大 淡出

本篇文章主要介绍了微信小程序开发之麦克风动画:帧动画、放大、淡出的相关资料。具有很好的参考价值。下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序实战之自定义模态弹窗(8)

这篇文章主要为大家详细介绍了微信小程序实战之自定义模态弹窗,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

jQuery加密密码到cookie的实现代码

本文通过实例代码给大家分享了jquery 加密密码到cookie的实现方法,非常不错,具有参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

javascript实现日期三级联动下拉框选择菜单

这篇文章主要介绍了javascript实现日期三级联动下拉框选择菜单,实现JS年月日三级联动下拉框选择功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多