How to use a different stylesheet for iphone or android?


Tags: jquery,css,detection

Problem :

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.



Solution :

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

    CSS Howto..

    How to make text appears alitter above using html and css

    How to avoid jquery library from effecting my css

    How to keep the aspect ratio of the image in css?

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    How to get names of css classes of an element

    How to add CSS class dynamically to html element

    How to specify height using fancybox 2.1.4

    how to show JS alert on open of each tab of the slider?

    How to Make a materialize CSS button's width same as col s12?

    How to center a 3 column Css Div Site?

    How to style in IE6 CSS?

    how to set size of canvas to its background image?

    How to add an anchor tag to a block of html?

    How do I center a div between two other divs?

    how to add a margin on both sides and center the text in a paragraph?

    Building a DOS-feel script. How to make the command line?

    How to vary shade of specific table row id

    How to make custom login button work

    How to make a jsp page keyboard accessible and how to change the position of a popped up jsp page?

    Push vertically resizable Div to bottom of wrapper. How?

    How do I apply a max-width to an input field form-control with a trailing secondary button in Bootstrap 3?

    How to make a full width image responsive

    Way of Determining How Many Style Rules I have

    CSS Sprites - How to align and make responsive?

    R: Shiny: How to align a gvisTable to the center in shinyapp

    How to change css styling for different lines within a paragraph in javascript

    How to convert SVG CSS animation to pure JS code

    How can I easily copy the whole CSS file from a website?

    How to make this character to be placed at the right side of its container?

    How to fill a QTextBrowser with a single table in Qt?