Question

我正在尝试为设备检测添加一些条件css，因为桌面和Android平板电脑风景资源中存在一些冲突

- if android_device?
        :css

          @media only screen and (max-width : 1280px) and (-webkit-device-pixel-ratio:2)  {

            /*CSS*/
          }

任何人都可以帮我解决我必须使用此检查的问题吗？

我从这个网址得到了这个引用： URL

Answer 1

无法使用严格的CSS检测操作系统或Web浏览器。

我建议使用Javascript来检测网络浏览器/操作系统，并相应地将类附加到页面的<body>。

然后，您可以编写特定于每个用例的CSS，只有在遇到特定条件时才会受到尊重。

这是example on jsFiddle。

Answer 2

实际上，我发现一种有用的好方法是在HTML中使用条件媒体查询，如下所示：

<html>
<head>
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
</head>
</html>

我相信它可以解决您的问题

来源：github.com/googlesamples/web-fundamentals

Answer 3

以下代码无效css：

- if android_device?
        :css

如果您想为桌面和Android设备编写特定样式，那么：

1）您可以在css中直接包含桌面样式而无需任何媒体查询。

2）特定于Android设备的样式可以作为

包含在媒体查询之间

@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {

  /*CSS  */
}

设备检测条件css

3 个答案: