Question

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

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

据我所知，存在其他媒体查询选项like this。但媒体查询没有选项来触发与用户代理相关的内容。

当然可以使用navigator.userAgent触发使用javascript显示或隐藏内容。但我搜索CSS方式。

Answer 1

当您将“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>