CODEWITHSUNDEEP
csscordovamedia-queriesiphone-5
adnanyousafch
adnanyousafch

Reputation: 1172

PhoneGap css media queries aspect not working

I have developed an app with iPhone as design target (i.e. 640x960 => 2:3) and I have done so using percentages for each division in layout so the ui streches itself with respect to device size. Now this works fine with iPad but I am having problems with 9:16 aspect ration devices. I have used Media Queries for the purpose but that isn't working.

The default code for division is:

.top_bar {
    height: 9%;
}

Now using Media Queries aspect ratio:

@media screen and (min-device-aspect-ratio: 9/16) {
    .top_bar {
        height: 7.5%;
    }
}

But this is not working, not on browser and not on device.

I have added viewport metatag content value as

content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"

Later I tried multiple resolutions to detect aspect ratio as:

@media 
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{

.top_bar {
    height: 7.5%;
}
}

But this isn't working either.

UPDATE - FIXED

Experiment a little and just changed min-device-aspect-ratio: 9/16 to max-aspect-ratio: 9/16 and its working fine now.

@media screen and (max-aspect-ratio: 9/16) {
    .top_bar {
        height: 7.5%;
    }
}

Upvotes: 2

Views: 3516

Answers (1)

Akhil Thesiya
Akhil Thesiya

Reputation: 950

put Your meta tag like this <meta name="viewport" content="width=device-width, initial-scale=1">

And write Your Media queries

@media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}

Upvotes: 1

Related Questions