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)文章
function定義的對(duì)象有一個(gè)prototype屬性，prototype屬性又指向了一個(gè)prototype對(duì)象，注意prototype屬性與prototype對(duì)象是兩個(gè)不同的東西，要注意區(qū)別.這篇文章主要介紹了JS中的prototype的相關(guān)資料,需要的朋友可以參考下2016-09-09
css實(shí)現(xiàn)的圖片模糊效果...2007-04-04
Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表
本文主要介紹了Web純前端“旭日?qǐng)D”實(shí)現(xiàn)元素周期表的實(shí)例解析。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
在JS中判斷瀏覽器的類型，估計(jì)是每個(gè)編輯過頁(yè)面的開發(fā)人員都遇到過的問題2012-10-10
javascript實(shí)現(xiàn)文字圖片上下滾動(dòng)的具體實(shí)例
這篇文章介紹了在JS中文字圖片上下滾動(dòng)的實(shí)現(xiàn)代碼，需要的朋友可以參考一下2013-06-06
這篇文章主要為大家詳細(xì)介紹了uniapp自定義彈框的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
js實(shí)現(xiàn)字符全排列算法的簡(jiǎn)單方法
下面小編就為大家?guī)硪黄猨s實(shí)現(xiàn)字符全排列算法的簡(jiǎn)單方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)提交input信息到后臺(tái)的方法,結(jié)合實(shí)例形式分析了微信小程序提交input信息到后臺(tái)相關(guān)事件響應(yīng)與數(shù)據(jù)處理操作技巧,需要的朋友可以參考下2019-01-01
JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法
這篇文章主要介紹了JavaScript合并兩個(gè)數(shù)組并去除重復(fù)項(xiàng)的方法,涉及javascript操作數(shù)組的合并與去重的相關(guān)技巧,需要的朋友可以參考下2015-06-06
本文主要介紹了移動(dòng)端頁(yè)面適配相關(guān)知識(shí)，用于解決在所有手機(jī)上看到字體的大小都一樣問題。下面跟著小編一起來看下吧2017-01-01