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