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

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.

score 2 · Answer 1 · answered Mar 05 '13 at 10:44

2

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

answered Mar 05 '13 at 10:44

Nelson

43,933
8
62
77

Rohan Kumar · Accepted Answer · 2013-03-05T11:27:31.007

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

edited Mar 05 '13 at 11:27

answered Mar 05 '13 at 10:38

Rohan Kumar

38,998
11
69
99

thank you. just wondering. If I have 3 pictures and I want just one of them to be displayed on iPhone and Android and other two on all devices, what do you suggest then? – Piotr Ciszewski Mar 05 '13 at 10:48
Its very simple Firstly, all images have `property=display:none`, and in the `if condition` you can add `class` `show` or `hide` to `other images` also add `2 classes` in your `css` like `.hide{display:none}` and `.show{display:block}` – Rohan Kumar Mar 05 '13 at 10:56
but can I do it other round? So basically, I need to create a css / jquery document, which can't be later modified. So I use just HTML to decide which img will be displayed. And this will be updated from time to time, so I will have access only to html file. How can I write properties to all images in a certain div to later use just different classes in html to display some of them. I hope i didn't mess much with my question. Do you know what I mean? – Piotr Ciszewski Mar 05 '13 at 11:05
this is great, thank you. Can I instead of iphone do all iOX systems? how to do it? this could do the job :). Should I do this: var IS_IPHONE = navigator.userAgent.match(/iOX/i) != null; ? Will this work? Thanks @RohanKumar – Piotr Ciszewski Mar 05 '13 at 11:43
1

@PiotrCiszewski Refer http://stackoverflow.com/questions/9038625/detect-if-device-is-ios – Rohan Kumar Mar 05 '13 at 11:51

Rishi Php · Answer 3 · 2013-03-05T11:01:18.933

1

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

edited Mar 05 '13 at 11:01

answered Mar 05 '13 at 10:38

Rishi Php

1,393
10
20

thank you. just wondering. If I have 3 pictures and I want just one of them to be displayed on iPhone and Android and other two on all devices, what do you suggest then? – Piotr Ciszewski Mar 05 '13 at 10:48

score 1 · Answer 4 · answered Mar 05 '13 at 10:43

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

Barney · Answer 5 · 2013-03-05T12:02:03.013

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.

How to use a different stylesheet for iphone or android?

5 Answers5

Linked