瀏覽器那些讓人頭疼的寬高

時間 2019-12-08

原文原文鏈接

　　當你看到 screen.width/height、window.innerWidth/innerHeight、window.pageXOffset/pageYOffset、document.documentElement.clientHeight/clientWidth 等，你是否已經眼花了。無論你是否是眼花，我反正不只眼花，腦子也短路了。下面咱們一塊兒來研究一下他們到底指的是哪一個width和height。css

　　注：一下全是在 chrome 瀏覽器下測試html

　　1. screen （window.screen）chrome

　　　　包含有關用戶屏幕的信息 , window 可忽略不寫, 因此 screen.width/height 表示用戶屏幕的寬高瀏覽器

　　2. window　工具

　　　　表示瀏覽器窗口。測試

　　　　window.innerWidth/innerHeight　表示當前瀏覽器的文檔區域的寬高(不包括工具欄)spa

　　　　window.outerWidth/outerHeight　表示當前瀏覽器的整個寬高(包括工具欄)htm

　　　　window.screenTop / screenLeft　　　表示瀏覽器離屏幕的距離　　　　對象

　　　　window.pageXOffset/pageYOffset　　表示文檔水平和垂直位移距離blog

<!DOCTYPE html>
<html>
<head>
<title>test viewport</title>
<meta name="viewport" content="" >
<style type="text/css">
#main {
height: 2000px;
width: 200px;
/*height: 200px;*/
padding: 2px;
margin: 3px;
border: 1px solid #eee;
background-color: #f0f0f0;
}
img {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="main">
test
<img class="img" src="./test.png">
</div>
</body>
</html>