CODEWITHSUNDEEP
iphoneandroidhtmlcssmobile
AKor
AKor

Reputation: 8892

Exclusive CSS for iPhone/Android

I'm making a mobile-friendly stylesheet for a page of mine. Is there a simple way to make it show that stylesheet to iPhone/Android users? Or do I have to pull the user-agents and figure it out that way - and how do I do that?

Also - any tools to make this sort of web dev easier?

Upvotes: 18

Views: 47439

Answers (3)

Arthur Tsidkilov
Arthur Tsidkilov

Reputation: 5421

detect what exactly use user, and style for his mobile device

iphone 4

@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2){
    .inphone4CSS{}
}

traget Target Samsung Galaxy S2

@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5){
    .GalaxyS2_CSS{}
}

more about it(or another devices) you can find here: Target a specific device

Upvotes: 0

Kevin Pajak
Kevin Pajak

Reputation: 291

Try this, using navigator.userAgent in JavaScript ;) (courtesy of this awesome post http://css-tricks.com/snippets/javascript/redirect-mobile-devices/):

if ((navigator.userAgent.match(/iPhone/)) || (navigator.userAgent.match(/iPod/))) {
   alert("we've got an iDevice, Scotty");
}

if (navigator.userAgent.match(/Android/)) {
   alert("Droid me baby");
}

Upvotes: 7

TNC
TNC

Reputation: 5386

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:

There's a few to get you started :)

Hope this helps.

Upvotes: 20

Related Questions