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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
javascript开发中因空格引发的错误
Nov 08 Javascript
js日期相关函数总结分享
Oct 15 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
Node.js连接postgreSQL并进行数据操作
Dec 18 Javascript
iscroll实现下拉刷新功能
Jul 18 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
Aug 12 Javascript
vue-cli3 热更新配置操作
Sep 18 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处理斐波那契数列非递归方法
2012/02/04 PHP
浅析PHP原理之变量分离/引用(Variables Separation)
2013/08/09 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
Laravel 添加多语言提示信息的方法
2019/09/29 PHP
javascript call方法使用说明
2010/01/11 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
js面向对象之静态方法和静态属性实例分析
2015/01/10 Javascript
PageSwitch插件实现100种不同图片切换效果
2015/07/28 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
Javascript 判断两个IP是否在同一网段实例代码
2016/11/28 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
jQuery 判断元素整理汇总
2017/02/28 Javascript
Angular2平滑升级到Angular4的步骤详解
2017/03/29 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
[50:34]VGJ.T vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
Python将文字转成语音并读出来的实例详解
2019/07/15 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
python实现图像拼接
2020/03/05 Python
python numpy库np.percentile用法说明
2020/06/08 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
一套VC试题
2015/01/23 面试题
个人求职信范文分享
2014/01/31 职场文书
师范类求职信
2014/06/21 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
2014个人年度工作总结
2014/12/15 职场文书
会议开幕词
2015/01/28 职场文书
MySQL系列之十一 日志记录
2021/07/02 MySQL