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 相关文章推荐
字符串的replace方法应用浅析
Dec 06 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
Mar 13 Javascript
JavaScript的事件代理和委托实例分析
Mar 25 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
Nov 12 Javascript
js实现带缓动动画的导航栏效果
Jan 16 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
Bootstrap table中toolbar新增条件查询及refresh参数使用方法
May 18 Javascript
vue实现的双向数据绑定操作示例
Dec 04 Javascript
简单了解three.js 着色器材质
Aug 03 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
PHP 实现代码复用的一个方法 traits新特性
2015/02/22 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
JavaScript 应用类库代码
2008/06/02 Javascript
jquery tab标签页的制作
2010/05/10 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
详解js的延迟对象、跨域、模板引擎、弹出层、AJAX【附实例下载】
2016/12/19 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
Python基于回溯法子集树模板解决取物搭配问题实例
2017/09/02 Python
python字典改变value值方法总结
2019/06/21 Python
wxpython绘制音频效果
2019/11/18 Python
python实现遍历文件夹图片并重命名
2020/03/23 Python
环境工程毕业生自荐信
2013/11/17 职场文书
大学生求职工作的自我评价
2014/02/13 职场文书
会务接待方案
2014/02/27 职场文书
股份合作协议书范本
2014/04/14 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
2015年大学生党员承诺书
2015/04/27 职场文书
上课迟到检讨书
2015/05/06 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
病房管理制度范本
2015/08/06 职场文书
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技