2

我正在尝试制作一个页面，其中某些元素仅对 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 / android 的设备）

.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：仅在安卓设备上显示

img5：仅在所有设备上显示

如何让浏览器选择正确的样式表？我知道如何通过分辨率来做到这一点，但我知道对于操作系统它的工作方式不同并且可以在 jquery 中完成。如果我可以在一个部分中完成就完美了，这样我就可以在整个页面上使用样式。感谢您的时间和帮助。

4

5 回答 5

2

另外，看看conditionizr，它似乎非常适合您的需求http://conditionizr.com/

于 2013-03-05T10:44:52.637 回答
1

你可以这样做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');
于 2013-03-05T10:38:37.747 回答
1

我们可以通过使用 javascript / jquery navigatorobj 来实现这一点，

  <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();
  }
于 2013-03-05T10:38:41.240 回答
1

使用一个简单的 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 } ?>
于 2013-03-05T10:43:32.260 回答
1

我的代码与其他解决方案的不同之处在于您不应用样式或动态读取 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;
}

然后我们运行一些脚本来推断并根据用户代理字符串应用它（恐怕只能推断，这是我们能做的最好的事情！）：

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总是随时可用。

于 2013-03-05T11:55:43.787 回答