我想说的是，我在这里阅读并尝试了多种说明：
我想让我的页面根据所使用的设备使用不同的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的Landscape CSS文件（我在这里只提供它们，因为它们基本上是相同的：
div { display: none; } #ipadlandscape { display: inline; }
我想知道要对link元素进行哪些修改，以确保ipad仅获得其样式表，iphone得到其自身的样式，并且（在这种情况下）htc愿望（或相同的分辨率/纵横比设备）获得该样式表。
好吧，经过一些（更多）玩弄并添加了一些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>
