jQuery 获取屏幕高度、宽度

大 | 中 | 小
[不指定 2013/10/27 20:11 | by 刘新修 ]

 

JavaScript代码
  1. 做手机Web开发做浏览器兼容用到了，所以在网上找了些汇总下。  
  2.   
  3. alert($(window).height()); //浏览器当前窗口可视区域高度   
  4. alert($(document).height()); //浏览器当前窗口文档的高度   
  5. alert($(document.body).height());//浏览器当前窗口文档body的高度   
  6. alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin   
  7. alert($(window).width()); //浏览器当前窗口可视区域宽度   
  8. alert($(document).width());//浏览器当前窗口文档对象宽度   
  9. alert($(document.body).width());//浏览器当前窗口文档body的高度   
  10. alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin   
  11.   
  12. // 获取页面的高度、宽度  
  13. function getPageSize() {  
  14.     var xScroll, yScroll;  
  15.     if (window.innerHeight && window.scrollMaxY) {  
  16.         xScroll = window.innerWidth + window.scrollMaxX;  
  17.         yScroll = window.innerHeight + window.scrollMaxY;  
  18.     } else {  
  19.         if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac      
  20.             xScroll = document.body.scrollWidth;  
  21.             yScroll = document.body.scrollHeight;  
  22.         } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari      
  23.             xScroll = document.body.offsetWidth;  
  24.             yScroll = document.body.offsetHeight;  
  25.         }  
  26.     }  
  27.     var windowWidth, windowHeight;  
  28.     if (self.innerHeight) { // all except Explorer      
  29.         if (document.documentElement.clientWidth) {  
  30.             windowWidth = document.documentElement.clientWidth;  
  31.         } else {  
  32.             windowWidth = self.innerWidth;  
  33.         }  
  34.         windowHeight = self.innerHeight;  
  35.     } else {  
  36.         if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode      
  37.             windowWidth = document.documentElement.clientWidth;  
  38.             windowHeight = document.documentElement.clientHeight;  
  39.         } else {  
  40.             if (document.body) { // other Explorers      
  41.                 windowWidth = document.body.clientWidth;  
  42.                 windowHeight = document.body.clientHeight;  
  43.             }  
  44.         }  
  45.     }        
  46.     // for small pages with total height less then height of the viewport      
  47.     if (yScroll < windowHeight) {  
  48.         pageHeight = windowHeight;  
  49.     } else {  
  50.         pageHeight = yScroll;  
  51.     }      
  52.     // for small pages with total width less then width of the viewport      
  53.     if (xScroll < windowWidth) {  
  54.         pageWidth = xScroll;  
  55.     } else {  
  56.         pageWidth = windowWidth;  
  57.     }  
  58.     arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);  
  59.     return arrayPageSize;  
  60. }  
  61.   
  62. // 滚动条  
  63. document.body.scrollTop;  
  64. $(document).scrollTop();  
JavaScript代码
  1. $("#content").height();  
  2. $("#content").innerHeight();//元素内部区域高度，忽略padding、border  
  3. $("#content").outerHeight();//忽略边框  
  4. $("#content").outerHeight(true);//包含边框高度  

JS获取浏览器窗口大小 获取屏幕，浏览器，网页高度宽度

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(5442)