css - WebView 的条件 CSS 查询

Question

我为桌面和移动浏览器访问者提供不同的内容。大多数情况下，我使用twitter bootstrap的“visible-xs”、“visible-desktop”类来处理它们。由于一些顾虑，我需要专门研究一些内容。

例如
，如果用户是桌面浏览器或移动浏览器：
如果用户来自我的移动应用程序的 webview，内容将可见：内容将不可见
（我将应用程序 WebView 的用户代理更改为我指定的字符串）

据我所知，还有其他类似的媒体查询选项。但是媒体查询没有触发与用户代理相关的内容的选项。

当然，可以使用navigator.userAgent. 但我寻找一种CSS方式。

score 0 · Accepted Answer

在您将“WebView 的用户代理更改为我指定的字符串”的那一刻，您可以将“mode”属性添加到文档的根元素（通常是<html>），并使用“compact”和“roomy”之类的值。

这两个 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>

1 回答 1