我试图做一个网页，一些元素将仅适用于Android和iPhone是可见的。 我想用简单的CSS属性隐藏元素例如：
HTML：
<style>img{ display:none;} </style>
<img src="img1.jpg" class="other">
<img src="img2.jpg" class="iphone android">
<img src="img3.jpg" class="iphone">
<img src="img4.jpg" class="android">
<img src="img5.jpg" class="iphone android other">
CSS 1（比iphone /机器人不同的设备）
.other{ display:inline;}
CSS 2（适用于iPhone）
.iphone{ display:inline;}
CSS 3（用于机器人）
.android{ display:inline;}
所有我现在需要的是某种方式检测设备（我相信它可以通过jQuery的完成和落实正确的CSS样式表）。
所以效果会：
IMG1：只比iPhone和Android的其他设备显示
IMG2：只在iPhone和Android设备上显示
IMG3：仅在iPhone上显示
IMG4：只在Android设备上显示
IMG5：只有在所有设备上显示
我怎样才能让浏览器选择合适的样式表？ 我知道如何解决做，但我知道的操作系统它的工作原理不同，可以在jQuery中进行。 这将是完美的，如果我能在部分做到这一点，这样我就可以在整个页面上使用的样式。 感谢您的时间和帮助。
你可以做到这一点javascript ，如：
按照这些要点
img1: displayed only on devices other than iphone and android
img2: displayed only on iphone and android devices
img3: displayed only on iphones
img4: displayed only on android devices
img5: displayed only on all devices
CSS
.show{display:block;}
.hide{display:none;}
HTML
<div id="imageContainer">
<img src="img1.jpg" id="image1" class="hide">
<img src="img2.jpg" id="image2" class="hide">
<img src="img3.jpg" id="image3" class="hide">
<img src="img4.jpg" id="image4" class="hide">
<img src="img5.jpg" id="image5" class="hide">
</div>
脚本
var IS_IPHONE = navigator.userAgent.match(/iPhone/i) != null;
var IS_ANDROID = navigator.userAgent.match(/Android/i) != null;
if(IS_IPHONE)
{
$('#image3, #image2').removeClass('hide').addClass('show');
}
else if(IS_ANDROID)
{
$('#image4, #image2').removeClass('hide').addClass('show');
}
else
{
$('#image1').removeClass('hide').addClass('show');
}
$('#image5').removeClass('hide').addClass('show');
另外，看看conditionizr，似乎很适合您的需求http://conditionizr.com/
用一个简单的PHP代码加载取决于设备的正确的CSS做到这一点：
<?php
$iphone = strpos($_SERVER['HTTP_USER_AGENT'],”iPhone”);
$android = strpos($_SERVER['HTTP_USER_AGENT'],”Android”);
$palmpre = strpos($_SERVER['HTTP_USER_AGENT'],”webOS”);
$ipod = strpos($_SERVER['HTTP_USER_AGENT'],”iPod”);
if($iphone) { ?>
<link rel="stylesheet" type="text/css" href="iphone.css">
<?php } else if ($android) { ?>
<link rel="stylesheet" type="text/css" href="android.css">
<?php } ?>
我们可以使用JavaScript / jQuery的实现这一目标navigator OBJ，
<img id="img1" src="img1.jpg" class="other">
<img id="img2" src="img2.jpg" class="iphone android">
<img id="img3" src="img3.jpg" class="other">
if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
// changing class of the dom element
$('#img2').addClass('iphone');
$('.iphone').show();
}
else if (navigator.userAgent.match(/Android/)) {
$('#img2').addClass('android');
$('.android').show();
}
else {
$('#img1').addClass('other');
$('#img3').addClass('other');
$('.other').show();
}
我的代码不同之处在于您没有应用样式或动态读取DOM中的其他解决方案 - 你检测设备，设置一个类，并让CSS做休息。 这意味着您可以立即运行脚本（不知道需要多少图像或诸如此类的东西），然后扩展您的HTML和CSS，你认为合适。 这也是迄今为止更好的性能，并且不需要任何库。
首先，改变你的CSS符合以下条件：
img{
display:none;
}
html.other .other{
display:inline;
}
html.iphone .iphone {
display:inline;
}
html.ipad .ipad {
display:inline;
}
html.android .android{
display:inline;
}
基本上，我们依靠的HTML类来推断设备是什么。 如果你想通用的iOS，那么你可以添加其他类到你的图像，并添加以下内容：
html.ipad .ios,
html.iphone .ios {
display:inline;
}
然后，我们运行一些脚本来推断，并根据用户代理字符串应用它（inferrable只恐怕，这是我们能做的最好的！）：
void function setUAclass(){
var ua = navigator.userAgent.toLowerCase();
var agent = 'other';
var classes = [
'ipad',
'iphone',
'android'
];
for(var i = 0, l = classes.length; i < l; ++i){
if(ua.indexOf(classes[i]) >= 0){
agent = classes[i]
}
}
document.lastElement.className += ' ' + agent;
}();
您可以在文档中的任何一点没有jQuery的运行这个。 有没有必要等待DOM准备，因为document.lastElement和navigator.userAgent总是被时间任何脚本可以执行一应俱全。
