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 can I get these two form fields to fill the space between them [duplicate]

    How can I get the CSS-Transforms to work

    How to add local css file to a page in WebView?

    CSS and jQuery - how to force 2 rules to work together

    How * tag can be used in CSS?

    How to get html data-attribute value in css regular expressions

    How can I dynamically change element's width related with parent width using only CSS? [closed]

    How to set keyboard focus to a representing parent element of a list

    how to make the title bar fixed

    How to fix roll link in IE11

    My footer keeps moving after updating other parts of my code. How do i fix this?

    How can I show part of an element, and toggle to all of the element on click?

    How to isolate specific platforms using CSS selectors in the Ionic framework

    jQuery - How to get elements height value and use it in another element via css code?

    How can I apply css to elements created with append()

    I was wondering how I would make an image appear when I hover over another image [closed]

    How to define `autocomplete=“off”` as a CSS style?

    How to add vertical and horizontal separators between inline elements in CSS?

    Website Content Shown on Moz but not Chrome

    How do I display an empty div tag with CSS?

    How to align text in the following way using css / html?

    How to add condition in Extjs4 tpl for detecting current browser

    How to achieve video-play navigation like khan academy in bootstrap? [closed]

    How is possible to get 2d transformation css vertical way

    How to apply jQuery on css selector :before [duplicate]

    [HTML][CSS] How to change opacity of background-image but not the text on it?

    How to exclude a CSS formatting? [duplicate]

    How to change default comments pattern in Atom (specifically for CSS)

    How to set a image/icon width that was specified through css content property?

    Show a caption with a semi-transparent color overlay when hovering over an image