首頁 > 開發者 > JavaScript
標籤：cli 相容 選項 模式 ie相容性 win 網頁 text eof
innerWidth與innerHeight屬性說明：window對象的唯讀屬性,聲明了視窗的文檔顯示區的高度和寬度，以像素(px)為計量單位。 (注意：這裡的寬度和高度不包括功能表列、工具列以及捲軸等的高度)下面便對這兩個屬性進行驗證：
螢幕解析度為：1920x1080 瀏覽器：QQ瀏覽器(核心是Chrome) 代碼如下：
var width=window.innerWidth,height=window.innerHeight; //分別定義width和height接收視窗的高和寬 alert(width); //視窗的寬度 1920px alert(height); //視窗的高度 950px
innerWidth因為瀏覽器兩旁沒有遮擋物,所以完美的得到了螢幕的寬度1920,而innerHeight因為瀏覽器上面有工具列,顯示屏又有工作列,所以被擠掉了130px
這次博主依次幹掉了工作列(其實就是隱藏了)和工具列中的標籤頁 並按下F12加上了開發人員選項 再次進行測試：
/*————————幹掉工作列後————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //寬度沒有變化,還是1920px alert(height); //而視窗的高度990px,表明工作列佔40px(工作列的預設高度) 導致沒有擷取到全部高度 /*————————又幹掉標籤頁後，並加上開發人員選項後————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //1381px,說明瀏覽器開發人員選項,對innerWidth有影響 1920-1381=549px alert(height); //而視窗的高度979px,工作列佔40px,標籤頁佔了11px(990-979) 而由此得出剩下的工具列佔了1080-979=101px
結論：說明innerHeight和innerWidth確實只計算顯示視窗像素,如果沒有功能表列、工具列等外部因素擠壓它,它就會自動延伸,而如果有就只按顯示表單走
測試完外部的因素,下面測試一下內部的因素捲軸
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>測試innerHeight屬性</title> </head> <body> <div style="width:500px;height:1300px;background-color:red;"></div> <script> window.onload=function(){ /*————————div超出長度,帶著捲軸後————————*/ var width=window.innerWidth,height=window.innerHeight; alert(width); //視窗的寬度 1920px alert(height); //視窗的高度 950px } </script> </body>
</html>
結論：說明內部的捲軸對innerWidth並沒有影響,即使存在對width也沒有影響,依舊是1920px
最終結論：innerHeight和innerWidth擷取的是表單的高與寬,外部因素如(瀏覽器開發人員選項,收藏夾)會對它有影響,而內部因素(捲軸)則對其沒有影響
下面說一下槽點最多的IE，關於IE相容性的問題，可以這樣解決
//相容代碼可以這樣子寫var width = window.innerWidth,height = window.innerHeight;if (typeof width != ‘number‘) { //如果類型不為number,表示該瀏覽器不支援innerWidth屬性 if (document.compatMode == ‘CSS1Compat‘) { //CSS1Compat：判斷是否為標準相容模式。 width = document.documentElement.clientWidth; height = document.docuementElement.clientHeight; } else { //不是標準模式,則有可能是IE6或及其以下版本(早期的瀏覽器對css進行解析時，並未遵守W3C標準) width = document.body.clientWidth; //網頁可見地區寬 height = document.body.clientHeight; //網頁可見地區高} alert(width); alert(height);
文章大概結束了(第一次發文,有理解不對的地方還望大神指教)
關於JavaScript的innerWidth與innerHeight
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
