设备检测条件css

Posted 2023-03-06

技术标签:

【中文标题】设备检测条件css【英文标题】：Device detecting Conditional css 【发布时间】：2013-07-31 15:05:33 【问题描述】：

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

- if android_device?
        :css

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

            /*CSS*/

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

我从这个网址得到了这个参考： URL

【问题讨论】：

如果是android_device？ - 这是什么？只有微软认为：'我们通常会弄错，所以让我们为开发人员提供一种解决问题的方法' 【参考方案1】：

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

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

然后，您可以针对每个用例编写特定的 CSS，只有在满足特定条件时才会兑现。

这是example on jsFiddle。

【讨论】：

【参考方案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

【讨论】：

【参考方案3】：

以下代码是无效的css：

- if android_device?
        :css

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

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

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

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

  /*CSS  */

【讨论】：

这不涉及检测安卓设备，只检测屏幕宽度。

以上是关于设备检测条件css的主要内容，如果未能解决你的问题，请参考以下文章

CSS3媒体查询总结