How to use a different stylesheet for iphone or android?

Question

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.:

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

Answer 2

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.

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

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

Answer 5

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