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

我想说,我已经阅读并尝试了许多变化的说明：

> 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

我想让我的页面使用不同的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;
}

我想知道对链接元素进行什么修改,以确保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>

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

解决方法

相关文章