JavaScript 是一門強(qiáng)大的編程語(yǔ)言，是用來(lái)控制網(wǎng)頁(yè)行為的腳本語(yǔ)言。它可以動(dòng)態(tài)的操作HTML和CSS，并且能夠讓頁(yè)面與用戶交互。在JavaScript中，我們經(jīng)常會(huì)遇到需要獲取屏幕大小的需求，哪怕是在當(dāng)下普及的移動(dòng)設(shè)備中這種需求仍然存在。在今天的文章中，我們將詳細(xì)了解 JavaScript 屏幕大小的相關(guān)知識(shí)。

要獲取屏幕大小，首先需要搞清楚屏幕的尺寸是指屏幕的分辨率，而分辨率是指顯示設(shè)備上水平方向和豎直方向上的像素點(diǎn)數(shù)。

//獲取屏幕寬度
var screenWidth = window.screen.width;
//獲取屏幕高度
var screenHeight = window.screen.height;

現(xiàn)在大多數(shù)智能手機(jī)都是采用響應(yīng)式設(shè)計(jì)的，為了適應(yīng)各種屏幕尺寸，頁(yè)面中也經(jīng)常會(huì)存在布局的自適應(yīng)。在這種情況下，我們可能需要?jiǎng)討B(tài)獲取頁(yè)面可見區(qū)域的大小，以適應(yīng)用戶設(shè)備的屏幕。

//獲取頁(yè)面可見區(qū)域的寬度
var clientWidth = document.documentElement.clientWidth;
//獲取頁(yè)面可見區(qū)域的高度
var clientHeight = document.documentElement.clientHeight;

在有些情況下，我們還要獲取整個(gè)文檔的大小，而不是僅僅是當(dāng)前可見區(qū)域的大小。這種情況下，我們就需要向下面這樣獲取整個(gè)文檔的大小。

//獲取整個(gè)文檔的寬度
var scrollWidth = document.documentElement.scrollWidth;
//獲取整個(gè)文檔的高度
var scrollHeight = document.documentElement.scrollHeight;

由于不同瀏覽器和設(shè)備的實(shí)際情況不同，我們?cè)谑褂?JavaScript 獲取屏幕、頁(yè)面等大小時(shí)，不要忘記處理兼容性問(wèn)題。下面是一些示例代碼。

// 獲取窗口可視范圍的寬度
function getViewPortWidth() {
var viewportWidth;
if (typeof window.innerWidth != 'undefined') {
viewportWidth = window.innerWidth;
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
viewportWidth = document.documentElement.clientWidth;
} else {
viewportWidth = document.getElementsByTagName('body')[0].clientWidth;
}
return viewportWidth;
}
// 獲取窗口可視范圍的高度
function getViewPortHeight() {
var viewportHeight;
if (typeof window.innerHeight != 'undefined') {
viewportHeight = window.innerHeight;
} else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientHeight != 'undefined' && document.documentElement.clientHeight != 0) {
viewportHeight = document.documentElement.clientHeight;
} else {
viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
}
return viewportHeight;
}

總結(jié)：JavaScript 可以輕松獲取屏幕大小，頁(yè)面大小等尺寸，這對(duì)于網(wǎng)站的布局及用戶交互等方面都至關(guān)重要。需要注意不同設(shè)備和瀏覽器都有不同的獲取方式，前端開發(fā)者需要處理兼容性問(wèn)題，并配合 CSS 等技術(shù)優(yōu)化頁(yè)面的表現(xiàn)效果。