JavaScript 測試 CSS 樣式表是否應用了 CSS3 媒體查詢

Question

我有兩個樣式表：

<link rel="stylesheet" type="text/css" href="/core.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/core-desktop.css" media="only screen and (min-width: 800px)" id="css-desktop" />

第二個應該僅在 window 為 800 像素或更寬時加載（較窄的顯示布局更適合移動設備）。

JavaScript 需要知道是否正在應用第二個樣式表，我已經嘗試過 jQuery：

($(window).width() > 800)

但是當你達到 790 - 810px 寬度時，Chrome/Firefox（可能還有其他）將返回一個值，例如 791，並且 800px+ 樣式表仍將被加載。

我懷疑這是由於滾動條（但針對 $(document) 或 $('html') 要么不起作用，要么是相同的）。

那么有沒有辦法測試 $('#css-desktop') 是否啟用/活動/使用？

Answer 1

您可以執行以下操作。

1. 制作一個有display: none; 在第一個樣式表中，因此未顯示。
2. 在第二個樣式表中，您將添加一個position: absolute
3. 在你的 Javascript 你檢查if( $("#thediv").css("position") == "absolute")

position: absolute; 僅應用於第二個樣式表。

Answer 2

你可以試試

window.matchMedia(document.getElementById('css-desktop').getAttribute('media')).matches;

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/matchMedia

Answer 3

這是一個關於如何嘗試檢測瀏覽器“真實”寬度的示例 window： 檢測 window 寬度並補償滾動條 - Javascript

Answer 4

您嘗試的操作有問題。

如果用戶在瀏覽頁面時將 window 的寬度調整到 800px 以下，他將獲得頁面的移動版本，稍后當他/她最大化時，他仍將獲得移動版本。

因此，依靠屏幕寬度並不是一個可靠的方法，因為如今手機的屏幕分辨率正在顯着增長。

最好的辦法是讀取瀏覽器的User Agent信息，這將很容易揭示它是移動瀏覽器還是其他瀏覽器，並根據它加載 css 文件。 然后對於可變屏幕分辨率，您可以使用當前技術來加載特定於寬度的代碼。