window.screenX 正在使用所有監視器計算，如何獲取當前監視器中窗口的 x 位置

Question

以下代碼獲取監視器的一些屬性、窗口大小和位置。 我的問題是window.screenX是由錯誤的監視器計算的。

由於我有三台顯示器，如果我將窗口放在左顯示器的左側，它會返回大約 -1920 像素，因為它使用中間顯示器作為中心點，我希望它返回零。 有沒有辦法根據窗口所在的當前監視器返回 Windows X 位置？

 let windowWidth let windowHeight let screenX let screenY let monitorWidth let monitorHeight window.addEventListener('resize', function() { onResize() }); setInterval(() => { onResize() }, 1000) function onResize() { windowWidth = window.innerWidth windowHeight = window.innerHeight screenX = window.screenX screenY = window.screenY monitorWidth = window.screen.availWidth monitorHeight = window.screen.availHeight document.getElementById("windowWidth").innerHTML = 'windowWidth : ' + windowWidth; document.getElementById("windowHeight").innerHTML = 'windowHeight : ' + windowHeight; document.getElementById("screenX").innerHTML = 'screenX : ' + screenX; document.getElementById("screenY").innerHTML = 'screenY : ' + screenY; document.getElementById("monitorWidth").innerHTML = 'monitorWidth : ' + monitorWidth; document.getElementById("monitorHeight").innerHTML = 'monitorHeight : ' + monitorHeight; }

 <div id="windowWidth"></div> <div id="windowHeight"></div> <div id="screenX"></div> <div id="screenY"></div> <div id="monitorWidth"></div> <div id="monitorHeight"></div>

Answer 1

使用 CSS 進行視口調整 - 不需要 javascript。

例子：

/* IF VIEWPORT IS SMALLER THAN 510 PX */
@media only screen and (max-width : 510px) {
div.this_wrapper{
max-width: 320px;
}
}