如何在 JavaScript 中取得使用者的裝置寬度，而不是視窗寬度？-css教學-PHP中文網

如何在 JavaScript 中取得使用者的裝置寬度，而不是視窗寬度？

Barbara Streisand

發布： 2024-12-01 13:11:11

原創

362 人瀏覽過

How Can I Get the User's Device Width, Not Viewport Width, in JavaScript?

在JavaScript 中偵測裝置寬度

問題：

問題：

我們如何取得使用者的裝置寬度，與視窗寬度不同，使用JavaScript？

答案：

CSS 媒體查詢提供了一種使用 max-device-width 屬性來實現此目的的方法。然而，在使用 JavaScript 綁定時，我們通常只能存取視口寬度。

優雅的解決方案：

為了優雅地解決這個問題，我們可以利用螢幕。 width 屬性來擷取裝置螢幕寬度。在某些情況下，例如在處理視窗大小可能與裝置螢幕大小不同的桌面瀏覽器時，我們可以使用 window.innerWidth 來代替。

跨平台相容性：

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

登入後複製

要獲得適用於行動和桌面瀏覽器的全面解決方案，請考慮以下因素：這可確保無論查看上下文如何，我們都能獲得正確的設備寬度。

以上是如何在 JavaScript 中取得使用者的裝置寬度，而不是視窗寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！