如何在 JavaScript 中取得實際設備寬度？

在JavaScript 中確定設備寬度

簡介

>

簡介

不是視口寬度，是JavaScript 開發中的常見需求。 CSS 媒體查詢透過 max-device-width 屬性提供此功能。然而，將此功能橋接到 JavaScript 仍然是一個挑戰。

裝置寬度與視窗寬度

視窗寬度與瀏覽器視窗中頁面的可見部分有關。另一方面，裝置寬度代表裝置的整個實體螢幕尺寸。在創建響應式設計時，尤其是在適應橫向智慧型手機時，這種差異變得至關重要。

JavaScript 解決方案

var deviceWidth = screen.width;

要在 JavaScript 中取得裝置寬度，請使用螢幕。 width 屬性：

var windowWidth = window.innerWidth;

在某些情況下，特別是在桌面瀏覽器中，window.innerWidth可能會提供更準確的寬度測量：

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

對於同時涉及桌面瀏覽器和行動裝置的場景，綜合解決方案是將兩種測量結合起來：無論設備如何，這種方法都可以確保正確的設備寬度或瀏覽器類型。

以上是如何在 JavaScript 中取得實際設備寬度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！