CODEWITHSUNDEEP
androidhtmlcssmedia-queries
Loralon
Loralon

Reputation: 191

Media Query and Android Device

i developing my first hybrid app using html5+JQueryMobile + Phonegap...i'm testing the app on a Samsung w (android 2.3.3), on a Iphone 4s and on IphoneSimulator for the Iphone5... in the home page i'd like to use different background images for this devices...i'm trying to use the CSS Media Querys...

/* IPHONE 4 - IPHONE 3*/
@media screen and (height: 480px)  {

#home {
background-image:url(images/home/home_Med.png);
background-size: auto 100%;
}

}


/* GALAXY S1 - S2 */
@media screen and (width: 480px)  {

#home {
background-image:url(images/home/home_Small.png);
background-size: auto 100%;
}

}


 /* GALAXY S3 - IPHONE 5*/
@media screen and (height: 568px),screen and (height: 1280px) {
#home {
background-image:url(images/home/home_Big.png);
background-size: auto 100%;
}

}

the Media Query works perfectly with the differents Iphone...but when i test on my Samsung W (480x800 like S1 and S2) or in the Galaxy S3 ADV it doesn't work... i tried to do a lot of different media querys...and when i used with:320 for the Samsung W it Works!!!....probably i don't understand somethings about the android device resolution... Can someone explain it?! THanks

Upvotes: 2

Views: 4969

Answers (2)

Maen
Maen

Reputation: 10698

You might want to check the pixel ratio as well, as 1px on screen != 1px on css.

@media only screen (-moz-min-device-pixel-ratio: 2), 
only screen and (-o-min-device-pixel-ratio: 2/1), 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2)

Check this article on quirksmode for further information.

Upvotes: 1

Extranion
Extranion

Reputation: 608

Always use the following line when you have media queries for mobile:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Also its better to use min-width and min-height for responsive design

Upvotes: 2

Related Questions