如何在 JavaScript 中取得實際設備寬度？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-12-02 00:37:10

原創

856 人瀏覽過

How Can I Get the Actual Device Width in 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中文網其他相關文章！