js獲取瀏覽器客戶區尺寸程式碼例項

antzone發表於2017-04-06
JS瀏覽器

本章節分享一段程式碼例項，它實現了實時獲取瀏覽器客戶區尺寸的功能。

當你在調整瀏覽器大小的時候，也能夠精確的獲取。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>螞蟻部落</title>
<script>
//獲取螢幕寬度並動態賦值  
var winWidth = 0;
var winHeight = 0;
function findDimensions(){
  //獲取視窗寬度
  if (window.innerWidth){
    winWidth = window.innerWidth;
  }
  else if ((document.body) && (document.body.clientWidth)){
    winWidth = document.body.clientWidth;
  }
  //獲取視窗高度
  if (window.innerHeight){
    winHeight = window.innerHeight;
  }
  else if ((document.body) && (document.body.clientHeight)){
    winHeight = document.body.clientHeight;
  }
  //通過深入Document內部對body進行檢測，獲取視窗大小
  if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth){
    winHeight = document.documentElement.clientHeight;
    winWidth = document.documentElement.clientWidth;
  }
  //結果輸出至兩個文字框
  
  document.body.innerHTML=(winHeight)+"<br/>"+winWidth;
}
//呼叫函式，獲取數值
window.onresize=findDimensions;
window.onload=function(){
  findDimensions();
}
</script>
</head>
<body>
</body>
</html>

相關文章