1

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

Community
  • 1
  • 1
Piotr Ciszewski
  • 1,691
  • 4
  • 30
  • 53
  • [I wrote an answer](http://stackoverflow.com/a/15223159/356541) to [your other question](http://stackoverflow.com/q/15221520/356541) that also works for this one. – Barney Mar 05 '13 at 12:03

3 Answers3

2

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

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
  • Thanks, that's great, unfortunately I need to target specific platforms, rather than screen size. I knew how to do it, but thank you very much. I have updated a question now. – Piotr Ciszewski Mar 05 '13 at 11:54
  • 1
    @PiotrCiszewski yup surely you can call the separate images for mobile platforms with the use of media queries please read media queries for standard devices and try it you will defiantly achieve your result – Shailender Arora Mar 05 '13 at 12:04
2

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/

mike
  • 101
  • 1
  • 6
  • Thanks @mike this is great. However, I can do jquery and css on the beginning, this is not a problem. I was meaning further updates. I will need to just change the class name on each picture to decide which is going to be displayed if you know what I mean. So in 2 weeks time we decide to change the image and the link behind it and which platform will it be visible to without changing the jquery or css. – Piotr Ciszewski Mar 05 '13 at 11:59
  • Piotr, you only need to use jqyery (or something similar) to find the 'platform' or browser. You then define your classes, with future needs in mind. For example, you can have more than just "android", etc, you can define classes such as "android-inline", "android-block", "android-none", for different display: types. I suggest you make a chart of all the various permutations you need, then create all the classes for them. It doesn't matter if you never use some of them, but as you said, in the future, you can't alter the css, so planning ahead is gonna pay off. – mike Mar 05 '13 at 12:39
0

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.

Sahil Popli
  • 1,967
  • 14
  • 21
  • Thanks, that's great, unfortunately I need to target specific platforms, rather than screen size. I knew how to do it, but thank you very much. I have updated a question now. – Piotr Ciszewski Mar 05 '13 at 11:53