js獲取屏幕高度和寬度的四種方式總結(jié)
1、document.documentElement.clientHeight
屏幕可視區(qū)域高度，文檔的根元素（通常是 <html> 元素）的高度，但會受到CSS樣式的影響。
實際應(yīng)用：對于H5的移動端，希望video元素在全屏狀態(tài)下占滿整個手機屏幕
2、window.innerWidth和window.innerHeight
可以獲取當(dāng)前窗口的寬度和高度，包括滾動條的寬度和高度。這些屬性在處理響應(yīng)式設(shè)計和窗口大小變化時非常有用（純視口高度，不受文檔內(nèi)容影響）。
3、window.outerWidth和window.outerHeight
返回瀏覽器窗口的外部尺寸，包括工具欄和滾動條，這個屬性在需要了解整個瀏覽器窗口高度時可能有用，但它在網(wǎng)頁布局和內(nèi)容顯示方面的作用較小，不常用
4、document.body.clientWidth和clientHeight
可能不會返回視口的高/寬度，而是返回 <body> 元素內(nèi)容的高/寬度，可能會受到CSS樣式和文檔布局的影響。
注意：100vh是相對于瀏覽器視口的高度而言的，視口是指瀏覽器中用于顯示網(wǎng)頁內(nèi)容的區(qū)域，它不包括瀏覽器的工具欄、標(biāo)簽欄等外部元素。
它與window.innerHeight在概念上最為接近。
然而，需要注意的是，它們之間仍然存在一些細(xì)微的差別，例如window.innerHeight是一個動態(tài)的屬性，而100vh是一個固定的CSS單位。
總結(jié)
到此這篇關(guān)于js獲取屏幕高度和寬度的四種方式的文章就介紹到這了,更多相關(guān)js獲取屏幕高度和寬度內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
iframe窗口高度自適應(yīng)的又一個巧妙實現(xiàn)思路
這篇文章主要介紹了實現(xiàn)iframe窗口高度自適應(yīng)的又一個巧妙思路,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了通過js如何改變狀態(tài)欄文字,需要的朋友可以了解下2014-06-06
在瀏覽器中獲取當(dāng)前執(zhí)行的腳本文件名的代碼
同事提了一個問題，如何在瀏覽器中動態(tài)插入的 JavaScript 文件中，獲取當(dāng)前文件名？2011-07-07
還隱約記得第一次遇到 parseInt這個詭異問題的時候，以為發(fā)現(xiàn)了IE的BUG，興奮不已。2009-09-09
這篇文章主要為大家詳細(xì)介紹了小程序animate動畫實現(xiàn)直播間點贊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)圖片輪播簡單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)計算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
js中判斷變量類型函數(shù)typeof的用法總結(jié)
下面小編就為大家?guī)硪黄猨s中判斷變量類型函數(shù)typeof的用法總結(jié)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了JS實現(xiàn)仿微信支付彈窗功能,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-06-06
js 動態(tài)添加標(biāo)簽（新增一行，其實很簡單，就是幾個函數(shù)的應(yīng)用）
把所有代碼拷下另存為一個html文件，在瀏覽器中打開，點擊“新增一行”按鈕就可以,以下是對js函數(shù)的解釋2009-03-03