JS獲取屏幕分辨率的關鍵屬性有5個，分別是window.screen.width用于獲取屏幕寬度，window.screen.height用于獲取屏幕高度，window.screen.availwidth用于獲取不包括任務欄的可用寬度，window.screen.availheight用于獲取不包括任務欄的可用高度，window.devicepixelratio用于獲取設備像素比以處理高清屏幕縮放問題。這些屬性幫助開發者全面了解設備屏幕信息，從而實現更精準的布局和適配策略。
獲取屏幕分辨率，JS提供了幾個關鍵屬性，它們像一把鑰匙，能幫你打開設備屏幕信息的大門。不過，直接告訴你答案未免太枯燥，不如我們一起探索一下，順便聊聊背后的故事。
// 解決方案
JS獲取屏幕分辨率，主要依賴于window.screen對象。這個對象包含了用戶屏幕的各種信息，包括寬度、高度、可用寬度、可用高度等等。
以下是幾個關鍵屬性：
-
window.screen.width: 屏幕的寬度，以像素為單位。這是最常用的屬性之一，直接告訴你屏幕有多“寬”。
-
window.screen.height: 屏幕的高度，同樣以像素為單位。有了寬度，當然也要知道高度，才能完整描述屏幕大小。
-
window.screen.availWidth: 屏幕可用寬度，不包括任務欄或Dock等系統界面。這個屬性在開發全屏應用或者需要考慮系統ui占用空間的應用時非常有用。想象一下，你的游戲被任務欄遮擋了一部分，體驗肯定大打折扣。
-
window.screen.availHeight: 屏幕可用高度，同樣不包括任務欄或Dock等系統界面。和availWidth類似，用于獲取實際可用的屏幕高度。
-
window.devicePixelRatio: 設備像素比，用于處理高清屏幕的縮放問題。這個屬性比較高級，涉及到Retina屏幕和DPI的概念。簡單來說，如果devicePixelRatio是2，那么1個css像素就對應2×2個物理像素，這樣才能保證在高清屏幕上顯示清晰。
// 獲取屏幕寬度 let screenWidth = window.screen.width; console.log("屏幕寬度: " + screenWidth); // 獲取屏幕高度 let screenHeight = window.screen.height; console.log("屏幕高度: " + screenHeight); // 獲取屏幕可用寬度 let availableWidth = window.screen.availWidth; console.log("可用寬度: " + availableWidth); // 獲取屏幕可用高度 let availableHeight = window.screen.availHeight; console.log("可用高度: " + availableHeight); // 獲取設備像素比 let devicePixelRatio = window.devicePixelRatio; console.log("設備像素比: " + devicePixelRatio);
為什么window.innerWidth和window.screen.width有時不一樣？
這是個好問題！window.innerWidth指的是瀏覽器窗口的內部寬度，而window.screen.width指的是整個屏幕的寬度。如果瀏覽器不是全屏模式，那么window.innerWidth肯定小于window.screen.width。另外，window.innerWidth還會受到滾動條的影響，如果頁面有垂直滾動條，window.innerWidth會減少滾動條的寬度。
所以，選擇哪個屬性取決于你的需求。如果你需要知道瀏覽器窗口的大小，用window.innerWidth；如果你需要知道整個屏幕的大小，用window.screen.width。
如何根據屏幕分辨率自適應網頁布局？
自適應布局是現代網頁開發的必備技能。一種常用的方法是使用CSS Media Queries。Media Queries允許你根據不同的屏幕尺寸應用不同的CSS樣式。
例如：
/* 默認樣式，適用于小屏幕 */ body { font-size: 16px; } /* 當屏幕寬度大于768px時應用以下樣式 */ @media (min-width: 768px) { body { font-size: 18px; } } /* 當屏幕寬度大于1200px時應用以下樣式 */ @media (min-width: 1200px) { body { font-size: 20px; } }
這段代碼的意思是，當屏幕寬度小于768px時，字體大小為16px；當屏幕寬度大于768px時，字體大小為18px；當屏幕寬度大于1200px時，字體大小為20px。通過這種方式，你可以根據不同的屏幕尺寸調整網頁的布局和樣式，從而實現自適應效果。
當然，除了Media Queries，還有很多其他的自適應布局技術，例如Flexbox、Grid Layout等等。選擇哪種技術取決于你的具體需求和個人喜好。
devicePixelRatio在移動端開發中有什么作用？
devicePixelRatio在移動端開發中至關重要，尤其是在處理高清屏幕時。如果沒有正確處理devicePixelRatio，你的網頁在高清屏幕上可能會顯得模糊不清。
舉個例子，假設你的網頁有一個寬度為100px的圖片。在普通屏幕上，這個圖片會占用100個物理像素。但是在devicePixelRatio為2的Retina屏幕上，這個圖片仍然會占用100個CSS像素，但實際上會占用200個物理像素。如果你的圖片本身只有100個像素，那么在Retina屏幕上就會被放大，從而導致模糊。
為了解決這個問題，你需要提供高清版本的圖片，并使用CSS來控制圖片的顯示大小。例如：
@@##@@
這段代碼的意思是，當devicePixelRatio為2時，使用image@2x.png這張圖片，否則使用image.png。image@2x.png是image.png的高清版本，它的寬度是image.png的兩倍。通過這種方式，你可以保證在高清屏幕上顯示清晰的圖片。
除了圖片，devicePixelRatio還會影響到其他元素的顯示效果，例如文本、邊框等等。因此，在移動端開發中，一定要重視devicePixelRatio，并采取相應的措施來保證網頁在高清屏幕上的顯示效果。
