使用 CSS 检测不同的设备平台
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8037973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Detect different device platforms using CSS
提问by Matt W
I'd like to say that I have read and tried many variations of the instructions here:
我想说的是，我已经阅读并尝试了此处说明的许多变体：
- http://www.cloudfour.com/ipad-css/
- Detect iPhone/iPad purely by css
- Detect Xoom browser (Android)
- http://www.w3.org/TR/css3-mediaqueries/
- http://www.w3schools.com/html5/att_link_media.asp
- http://en.wikipedia.org/wiki/List_of_Android_devices
- http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
- http://www.cloudfour.com/ipad-css/
- 纯粹通过 css 检测 iPhone/iPad
- 检测 Xoom 浏览器 (Android)
- http://www.w3.org/TR/css3-mediaqueries/
- http://www.w3schools.com/html5/att_link_media.asp
- http://en.wikipedia.org/wiki/List_of_Android_devices
- http://en.wikipedia.org/wiki/File:Vector_Video_Standards2.svg
I would like to have my page use different CSS files depending on the device being used. I have seen many solutions to this, all using some form of the above.
我想让我的页面根据所使用的设备使用不同的 CSS 文件。我已经看到了很多解决方案，都使用了上述的某种形式。
However, when testing on an HTC Desire I consistently get either the output intended for iPad or a completely unfiltered output. Currently, my test code is based on:
但是，在 HTC Desire 上进行测试时，我始终得到适用于 iPad 的输出或完全未过滤的输出。目前，我的测试代码基于：
http://www.cloudfour.com/ipad-css/
Here is my HTML file:
这是我的 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>
And here is the iPad's Landscape CSS file (I'll only provide that here as they are all basically the same:
这是 iPad 的 Landscape CSS 文件（我只会在此处提供，因为它们基本相同：
div
{
display: none;
}
#ipadlandscape
{
display: inline;
}
I would like to know what modifications to make to the link elements to ensure that the ipad gets only its stylesheets, the iphone gets its own and (in this case) the htc desire (or same resolution/aspect devices) get that stylesheet.
我想知道对链接元素进行哪些修改以确保 ipad 仅获取其样式表，iphone 获取其自己的样式表，并且（在这种情况下）htc 期望（或相同分辨率/方面的设备）获取该样式表。
回答by Matt W
Well, after some (much more) playing around and the addition of some javascript, I've got the solution - the droid device was not using the resolution I believed it was:
好吧，经过一些（更多）尝试并添加了一些 javascript，我得到了解决方案 - 机器人设备没有使用我认为的分辨率：
<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>
