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 匿名函数的理解(透彻版)
Jan 28 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
禁止你的左键复制实用技巧
Jan 04 Javascript
JavaScript中几种排序算法的简单实现
Jul 29 Javascript
深入php面向对象、模式与实践
Feb 16 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
JavaScript实现in-place思想的快速排序方法
Aug 07 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
js+canvas实现简单扫雷小游戏
Jan 22 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
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
第四章之BootStrap表单与图片
2016/04/25 Javascript
基于javascript编写简单日历
2016/05/02 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
js变量提升深入理解
2016/09/16 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
js实现扫雷小程序的示例代码
2017/09/27 Javascript
vue.js系列中的vue-fontawesome使用
2018/02/10 Javascript
详解vue-cli 快速搭建单页应用之遇到的问题及解决办法
2018/03/01 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
使用Three.js实现太阳系八大行星的自转公转示例代码
2019/04/09 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[03:48]2014DOTA2 TI专访71DK夺冠不靠小组赛高排名
2014/07/11 DOTA
python基于queue和threading实现多线程下载实例
2014/10/08 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
浅析Python pandas模块输出每行中间省略号问题
2018/07/03 Python
Python实现拷贝/删除文件夹的方法详解
2018/08/29 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
python基于paramiko将文件上传到服务器代码实现
2019/07/08 Python
Python3 mmap内存映射文件示例解析
2020/03/23 Python
解决pycharm编辑区显示yaml文件层级结构遇中文乱码问题
2020/04/27 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python中使用.py配置文件的方法详解
2020/11/23 Python
使paramiko库执行命令时在给定的时间强制退出功能的实现
2021/03/03 Python
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
CSS3选择器新增问题的实现
2021/01/21 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
历史学专业个人的自我评价
2013/10/13 职场文书
优秀小学生家长评语
2014/01/30 职场文书
物资采购方案
2014/06/12 职场文书
五心教育心得体会
2014/09/04 职场文书
redis数据一致性的实现示例
2022/03/18 Redis