如何在 JavaScript 中準確確定裝置螢幕寬度？

在 JavaScript 中確定裝置螢幕寬度

在 JavaScript 中擷取裝置螢幕寬度的能力對於根據使用者裝置的特定尺寸自訂內容非常有價值。雖然 CSS 媒體查詢提供了一種方便的方法來進行與螢幕尺寸相關的樣式調整，但 JavaScript 提供了一種直接方法來存取裝置的實際寬度。

與視口寬度不同，設備寬度提供了螢幕物理尺寸的純粹測量值。這對於定位可能與視口約束不符的特定設備方向特別有用。例如，在 iOS 裝置上，目標最大寬度為 640 像素的 CSS 媒體查詢即使在 iPhone 4 上也將捕獲橫向和縱向模式。然而，Android 設備需要使用設備寬度來有效處理兩個方向，同時排除桌面設備。

但是，當嘗試根據裝置寬度呼叫 JavaScript 綁定時，通常會受到視口寬度的限制。此限制強制進行額外的條件檢查，如以下程式碼所示：

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

要繞過這種冗長的方法，請考慮利用screen.width 屬性，它提供對設備物理螢幕寬度的直接訪問。此外，對於視窗大小可能與螢幕大小不同的桌面瀏覽器，可以使用 window.innerWidth 屬性。

在涉及行動和桌面瀏覽器的情況下，通常建議使用混合方法：

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

這種組合可確保跨各種裝置和作業系統進行準確的裝置寬度偵測。

以上是如何在 JavaScript 中準確確定裝置螢幕寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！