首頁 >web前端 >css教學 >如何在 JavaScript 中取得使用者的裝置寬度,而不是視窗寬度?

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

Barbara Streisand
Barbara Streisand原創
2024-12-01 13:11:11363瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn