使用 CSS 检测不同的设备平台答案

【问题标题】：Detect different device platforms using CSS使用 CSS 检测不同的设备平台
【发布时间】：2011-12-23 16:34:30
【问题描述】：

我想说的是，我已经阅读并尝试了这里的说明的许多变体：

我想让我的页面根据所使用的设备使用不同的 CSS 文件。我已经看到了很多解决方案，都使用上述的某种形式。

但是，在 HTC Desire 上进行测试时，我始终会得到用于 iPad 的输出或完全未经过滤的输出。目前，我的测试代码基于：

http://www.cloudfour.com/ipad-css/

这是我的 HTML 文件：

<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />

    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />

    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 480px) and (device-height: 800px) and (orientation:portrait)" href="htcdesire-portrait.css" />

    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />
</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
</body>
</html>

这是 iPad 的横向 CSS 文件（我只在这里提供，因为它们基本相同：

div
{
    display: none;
}

#ipadlandscape
{
    display: inline;
}

我想知道对链接元素进行哪些修改以确保 ipad 仅获取其样式表，iphone 获取自己的样式表，并且（在这种情况下）htc 需求（或相同分辨率/方面的设备）得到它样式表。

【问题讨论】：

标签： css mobile-devices platform-detection

【解决方案1】：

好吧，在玩了一些（更多）并添加了一些 javascript 之后，我找到了解决方案 - droid 设备没有使用我认为的分辨率：

<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>

【讨论】：

你是救命稻草...一直在寻找针对 iPad 的媒体查询。您的示例完美运行！谢谢！
请注意，device-width 和 device-height 指令仅在屏幕尺寸完全匹配给定数字时有效。请注意，此代码不适用于具有类似尺寸的其他设备，因此该网站看起来完全不适应它们！如果您想支持所有其他设备（也将在未来生产），您应该为它们添加一个使用 min- 和 max- 前缀的代码。
我知道这有点旧，但我尝试过并且成功了，除了它在左上角给了我屏幕尺寸。代码需要改吗？
Galaxy s4 和 Nexus 4 等新的 Android 设备现在通过了 iPad 的检查，因为它们具有 1024 x 768 显示屏。