CODEWITHSUNDEEP
jquerycssdetection
Piotr Ciszewski
Piotr Ciszewski

Reputation: 1801

How to use a different stylesheet for iphone or android? I can modify only html later on

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

I have done another subject here another question, but there is one important tricky thing. After applying everything, I will later need to change only HTML, I won't be able to touch jquery and css files later, so as I will do them they must remain untouched. I will be able to manually add classes to each image only, so I only thing I can manipulate is manually adding and removing classes from the pure html. How can I do it? So, if I add class="iphone android", then the image will be displayed on these two systems. Also can I do it by iOX generally? So it will work on iphones, ipods, ipads, etc?. Thx for your help and time.

BTW. I know how to do it for different resolutions, but here I need specifically for the each operating systems, so if I have a button which leads the user to the android market, I need the specific button/image to be displayed only on Android devices... etc. Thanks

Upvotes: 1

Views: 1012

Answers (3)

mike
mike

Reputation: 101

CSS Media queries do not do browser recognition, which is what you want. If you need to determine what browser is viewing your website, you need to "sniff" the user agent string (which is not completley reliable).

To do this, you can use Javascript, or php, or whatever, but not simply html.

Here's a link to something you can try:

http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Upvotes: 2

Sahil Popli
Sahil Popli

Reputation: 2003

You could do something like this, if your stylesheet is the same for iOS/android.

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />

But if you're trying to detect if it's the iOS OR Android, then you'll need to do detection.

In terms of making mobile dev easier, there's a ton of stuff:

http://www.phonegap.com/

http://www.sencha.com/products/touch/

http://www.appcelerator.com/

http://www.jquerymobile.com/

http://www.jqtouch.com/

There's a few to get you started :)

Hope this helps.

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7788

You can easily achieve your desired through CSS3 Media Queries in your css..

And for how to use CSS3 Media Queries read the mentioned below articles they are really helpful.

Media Queries for Standard Devices

How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

Upvotes: 2

Related Questions