針對WebViews的條件CSS查詢

我爲桌面和移動瀏覽器訪問者提供不同的內容。大多數情況下，我通過使用twitter bootstrap的「visible-xs」，「visible-desktop」類來處理它們。由於一些擔憂，我需要專門化一些內容。針對WebViews的條件CSS查詢

例如
如果用戶是桌面瀏覽器或移動瀏覽器：內容將是可見的
如果用戶來自我的移動應用程序的網頁流量：內容將不可見
（我改變我的應用程序的WebView用戶代理到我的指定字符串）

據我所知存在其他媒體查詢選項like this。但媒體查詢無法觸發與用戶代理相關的內容。

當然，使用navigator.userAgent可以觸發以javascript顯示或隱藏內容。但我尋找一種CSS方式。

2013-10-27 trante

當您將「WebView的用戶代理程序更改爲指定的字符串」時，可以將「mode」屬性添加到文檔的根元素（通常爲<html>），其值爲「compact」和「寬敞」。

這兩個CSS規則：

:root[mode=compact] [roomy] { display:none; } 
:root[mode=roomy] [compact] { display:none; }

將允許您定義特定視圖模型的特定元素的可見性。像這樣：

<p compact>This is seen in compact mode</p> 
<p roomy>This is seen in roomy mode</p>

2013-10-27 20:09:50

回答