2

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

- if android_device?
        :css

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

            /*CSS*/
          }

谁能帮我弄清楚我必须在哪里使用这张支票？

我从这个 url 得到这个参考： URL

4

3 回答 3

3

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

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

然后，您可以为每个用例编写特定的 CSS，只有在遇到该特定条件时才会兑现。

这是jsFiddle 上的一个示例。

于 2013-12-06T22:57:59.243 回答
0

实际上，我发现有一种很好的方法很有用，即在 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

于 2020-05-19T16:24:47.173 回答
-6

以下代码是无效的 css：

- if android_device?
        :css

如果你想为桌面和安卓设备编写特定的样式，那么：

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

2) 特定于 android 设备的样式可以包含在媒体查询之间

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

  /*CSS  */
}
于 2013-07-31T08:47:37.713 回答