How to use a different stylesheet for iphone or android?

问题

I'm trying to make a page where some elements will be visible only for android and iphone. I was thinking of using simple css properties to hide the elements e.g.:

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 (for devices different than iphone / android)

.other{ display:inline;}

CSS 2 (for iphones)

.iphone{ display:inline;}

CSS 3 (for androids)

.android{ display:inline;}

All I need now is to detect the device somehow ( I belive it can be done by jQuery and implement the correct CSS stylesheet).

So the effect will be:

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

how can I get the browser to select the proper stylesheet? I know how to do it by resolution, but I know for the operating systems it works different and can be done in jquery. It would be perfect if I can do it in a section, so I can use styles on the whole page. Thank you for your time and help.

回答1:

You can do it by javascript like:

As per these points

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>

SCRIPT

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');

回答2:

Also, take a look at conditionizr, it seems very suited for your needs http://conditionizr.com/

回答3:

Do it with a simple php code that load the right css depending on the device:

<?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 } ?>

回答4:

we can achive this by using 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();
  }

回答5:

My code differs from the other solutions in that you don't apply styles or read the DOM dynamically — you detect the device, set a class, and let CSS do the rest. This means you can run the script immediately (without knowing how many images or whatnot are needed), and then extend your HTML and CSS as you see fit. It's also far more performant, and doesn't require any libraries.

First of all, change your CSS to match the following:

img{
  display:none;
}

html.other .other{
  display:inline;
}

html.iphone  .iphone {
  display:inline;
}

html.ipad    .ipad   {
  display:inline;
}

html.android .android{
  display:inline;
}

Basically, we're relying on a class on the HTML to infer what the device is. If you want generic iOS, then you can add another class to your images and add the following:

html.ipad    .ios,
html.iphone  .ios    {
  display:inline;
}

Then we run some script to infer that and apply it based on the user agent string (inferrable only I'm afraid, this is the best we can do!):

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;
}();

You can run this without jQuery, at any point in the document. There's no need to wait for DOM ready because document.lastElement and navigator.userAgent are always readily available by the time any script can execute.

来源：https://stackoverflow.com/questions/15221520/how-to-use-a-different-stylesheet-for-iphone-or-android

标签

jquery

css

detection