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

我想说我已阅读并尝试了许多说明的变体:

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

我想让我的页面使用不同的CSS文件,具体取决于所使用的设备.我已经看到了许多解决方案,都使用了上面的某种形式.

然而,当在HTC Desire上进行测试时,我始终获得用于iPad的输出或完全未经过滤的输出.目前,我的测试代码基于:

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

这是我的HTML文件:

    

    
    

    
    

    
    

    


    
iphone landscape
    
iphone portrait
    
ipad landscape
    
ipad portrait
    
htc desire landscape
    
htc desire portrait
    
desktop

这里是iPad的Landscape CSS文件(我只在这里提供,因为它们基本相同:

div
{
    display: none;
}

#ipadlandscape
{
    display: inline;
}

我想知道对链接元素进行了哪些修改以确保ipad只获得其样式表,iphone获得了自己的(在这种情况下)htc欲望(或相同的分辨率/方面设备)获得该样式表.

好吧,经过一些(更多)玩游戏和添加一些javascript后,我得到了解决方案 - 机器人设备没有使用我认为的分辨率:

    

    
    
    
    
    
    
    



    
iphone landscape
    
iphone portrait
    
ipad landscape
    
ipad portrait
    
htc desire landscape
    
htc desire portrait
    
desktop