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 相关文章推荐
document.designMode的功能与使用方法介绍
Nov 22 Javascript
JavaScript Event学习第九章 鼠标事件
Feb 08 Javascript
location.search在客户端获取Url参数的方法
Jun 08 Javascript
使用js+jquery实现无限极联动
May 23 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
jquery实现select选中行、列合计示例
Apr 25 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 Javascript
理解javascript函数式编程中的闭包(closure)
Mar 08 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
判断js的Array和Object的实现方法
Aug 29 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
php生成年月日下载列表的方法
2015/04/24 PHP
php生成固定长度纯数字编码的方法
2015/07/09 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
php中通过eval实现字符串格式的计算公式
2017/03/18 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
Prototype Function对象 学习
2009/07/12 Javascript
把html页面的部分内容保存成新的html文件的jquery代码
2009/11/12 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
javascript原型继承工作原理和实例详解
2016/04/07 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
解决Layui 表格自适应高度的问题
2019/11/15 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
python超简单解决约瑟夫环问题
2015/05/12 Python
Python中str.format()详解
2017/03/12 Python
Python使用文件锁实现进程间同步功能【基于fcntl模块】
2017/10/16 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
Python判断对象是否相等及eq函数的讲解
2019/02/25 Python
快速查找Python安装路径方法
2020/02/06 Python
python 常见的排序算法实现汇总
2020/08/21 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
蔻驰意大利官网:COACH意大利
2019/01/16 全球购物
xxx同志考察材料
2014/02/07 职场文书
纪念九一八事变演讲稿:勿忘国耻
2014/09/14 职场文书
幼儿园教学反思范文
2016/03/02 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
Java 语言中Object 类和System 类详解
2021/07/07 Java/Android