如何獲得 CSS 的最大屏幕寬度，而不是當前的 window 寬度？

Question

問題

我只能找到顯示如何使用 vw/vh 獲取window 的當前大小的答案，這不是我需要的。

我真正需要的

我需要獨立於瀏覽器 window 是否最大化的監視器屏幕的全寬。

有沒有辦法使用純 CSS 來做到這一點？ 如果不是，可以使用 JavaScript + CSS 來完成嗎？ 如果是這樣，如何？

Answer 1

CSS 只能給你視口寬度，即 window 寬度。 但是，您可以使用screen.width來獲取屏幕寬度 JavaScript。

 console.log(screen.width);

Answer 2

您是想讓標簽的內容占據整個屏幕空間，還是想要專門獲取以像素為單位的高度和寬度值？ 如果這是第一個選項，我想我已經找到了解決方案。

 * { margin: 0; padding: 0; box-sizing: border-box; } main { background: blue; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main></main> <script src="./script.js"></script> </body> </html>

解決它的另一種方法是使用 window 的 innerWidth 和 innerHeight 值

 const width = window.innerWidth; const height = window.innerHeight; const main = document.querySelector("main"); main.style.width = `${width}px`; main.style.height = `${height}px`;

 * { margin: 0; padding: 0; box-sizing: border-box; } main { background: blue; }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="./style.css"> </head> <body> <main></main> <script src="./script.js"></script> </body> </html>

使用的參考： https://tutorial.tips/how-to-get-viewport-width-and-height-using-javascript/

如何獲得 CSS 的最大屏幕寬度，而不是當前的 window 寬度？

問題描述

2 個解決方案

解決方案1
2 已采納 2022-03-02 23:03:36

解決方案2
1 2022-03-02 23:40:35

如何獲得 CSS 的最大屏幕寬度，而不是當前的 window 寬度？

問題描述

2 個解決方案

解決方案1 2 已采納 2022-03-02 23:03:36

解決方案2 1 2022-03-02 23:40:35

解決方案1
2 已采納 2022-03-02 23:03:36

解決方案2
1 2022-03-02 23:40:35