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


Posted in Javascript onMay 17, 2016

做手机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 获取屏幕高度、宽度的简单实现案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超棒的javascript页面顶部卷动广告效果
Dec 01 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
May 27 Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 Javascript
js+canvas实现滑动拼图验证码功能
Mar 26 Javascript
vue使用jsonp抓取qq音乐数据的方法
Jun 21 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
Vue + Elementui实现多标签页共存的方法
Jun 12 Javascript
在webstorm中配置less的方法详解
Sep 25 Javascript
javascript css红色经典选项卡效果实现代码
May 17 #Javascript
JS获取IMG图片高宽的简单实例
May 17 #Javascript
简单的分页代码js实现
May 17 #Javascript
Js获取图片原始宽高的实现代码
May 17 #Javascript
创建一个类Person的简单实例
May 17 #Javascript
jQuery Mobile操作HTML5的常用函数总结
May 17 #Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 #Javascript
You might like
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
半角全角相互转换的js函数
2009/10/16 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
2010/04/18 Javascript
jQuery入门介绍之基础知识
2015/01/13 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
2016/04/29 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
详解VScode编辑器vue环境搭建所遇问题解决方案
2019/04/26 Javascript
vue项目创建步骤及路由router
2020/01/14 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Python找出9个连续的空闲端口
2016/02/01 Python
手把手教你python实现SVM算法
2017/12/27 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
tensor和numpy的互相转换的实现示例
2019/08/02 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Python入门基础之数字字符串与列表
2021/02/01 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
一份婚庆公司创业计划书
2014/01/11 职场文书
工会趣味活动方案
2014/08/18 职场文书
爱护公物演讲稿
2014/09/09 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
经营场所证明范本
2015/06/19 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle
pytorch 中autograd.grad()函数的用法说明
2021/05/12 Python
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript