響應式設計：如何在桌面瀏覽器的模式窗口中打開鏈接，但不在移動設備上打開鏈接？

Question

我有一些鏈接，我想在桌面用戶的模式窗口中打開，但不在移動用戶的模式窗口中（通過CSS類和jQuery事件偵聽器啓動的模式窗口）。該網站使用媒體查詢運行響應式主題，所以我試圖弄清楚如何處理不同屏幕尺寸的不同行爲（對每種屏幕尺寸使用的設備類型進行假設）。

我現在設置了2個不同的鏈接。這些鏈接中只有1個顯示在每個屏幕尺寸上，我假定較大的屏幕尺寸將使用模態窗口鏈接。當媒體查詢返回更小的尺寸時，我隱藏模式窗口鏈接並顯示標準鏈接到所需的頁面。

似乎必須有一個更好的方法來做到這一點。有任何想法嗎？

Answer 1

如果我理解正確，您需要一個錨來根據屏幕大小做不同的事情（另一種檢測手機的方法，並避免在桌面上只有小窗口是基於大小和像素比進行媒體查詢）。

我用這種方法看到的問題是（假設你有兩個選項，只是顯示/隱藏正確的基於CSS媒體查詢），你在代碼中重複的內容，這是不是很好的可訪問性。

爲什麼不通過jQuery來做到這一點？您可以檢測視口大小併爲鏈接提供足夠的功能。例如，除了重定向到新地址之外，您的默認鏈接沒有特別的操作。但是，如果視口大於x，則將鏈接的內容編寫爲不同（添加一個類以打開模式等）。