·您当前的位置:主页 > 技术教程 > jQuery教程 >

[jQuery]通过jQuery来获取用户端屏幕宽高

时间:2014-10-30 14:57酷播
[jQuery]通过jQuery来获取用户端屏幕宽高

做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。

  1. alert($(window).height()); //浏览器当前窗口可视区域高度  
  2.  
  3. alert($(document).height()); //浏览器当前窗口文档的高度  
  4.  
  5. alert($(document.body).height());//浏览器当前窗口文档body的高度  
  6.  
  7. alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin  
  8.  
  9. alert($(window).width()); //浏览器当前窗口可视区域宽度  
  10.  
  11. alert($(document).width());//浏览器当前窗口文档对象宽度  
  12.  
  13. alert($(document.body).width());//浏览器当前窗口文档body的高度  
  14.  
  15. alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin  
  16.  
  17.   
  18.  
  19. // 获取页面的高度、宽度 
  20.  
  21. function getPageSize() { 
  22.  
  23.     var xScroll, yScroll; 
  24.  
  25.     if (window.innerHeight && window.scrollMaxY) { 
  26.  
  27.         xScroll = window.innerWidth + window.scrollMaxX; 
  28.  
  29.         yScroll = window.innerHeight + window.scrollMaxY; 
  30.  
  31.     } else { 
  32.  
  33.         if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac     
  34.  
  35.             xScroll = document.body.scrollWidth; 
  36.  
  37.             yScroll = document.body.scrollHeight; 
  38.  
  39.         } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari     
  40.  
  41.             xScroll = document.body.offsetWidth; 
  42.  
  43.             yScroll = document.body.offsetHeight; 
  44.  
  45.         } 
  46.  
  47.     } 
  48.  
  49.     var windowWidth, windowHeight; 
  50.  
  51.     if (self.innerHeight) { // all except Explorer     
  52.  
  53.         if (document.documentElement.clientWidth) { 
  54.  
  55.             windowWidth = document.documentElement.clientWidth; 
  56.  
  57.         } else { 
  58.  
  59.             windowWidth = self.innerWidth; 
  60.  
  61.         } 
  62.  
  63.         windowHeight = self.innerHeight; 
  64.  
  65.     } else { 
  66.  
  67.         if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode     
  68.  
  69.             windowWidth = document.documentElement.clientWidth; 
  70.  
  71.             windowHeight = document.documentElement.clientHeight; 
  72.  
  73.         } else { 
  74.  
  75.             if (document.body) { // other Explorers     
  76.  
  77.                 windowWidth = document.body.clientWidth; 
  78.  
  79.                 windowHeight = document.body.clientHeight; 
  80.  
  81.             } 
  82.  
  83.         } 
  84.  
  85.     }        
  86.  
  87.     // for small pages with total height less then height of the viewport     
  88.  
  89.     if (yScroll < windowHeight) { 
  90.  
  91.         pageHeight = windowHeight
  92.  
  93.     } else { 
  94.  
  95.         pageHeight = yScroll
  96.  
  97.     }     
  98.  
  99.     // for small pages with total width less then width of the viewport     
  100.  
  101.     if (xScroll < windowWidth) { 
  102.  
  103.         pageWidth = xScroll
  104.  
  105.     } else { 
  106.  
  107.         pageWidth = windowWidth
  108.  
  109.     } 
  110.  
  111.     arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight); 
  112.  
  113.     return arrayPageSize; 
  114.  
  115.  
  116. // 滚动条 
  117.  
  118. document.body.scrollTop; 
  119.  
  120. $(document).scrollTop(); 

 

热门文章推荐

请稍候...
  • 锁定云视频大聚惠
  • 相约直播超值狂欢
保利威视云直播
保利威视云视频
微信付费直播
酷播云免费在线视频整体解决方案
酷播v4.0网页播放器