CODEWITHSUNDEEP
androidcordovamedia-queries
v3rt1ag0
v3rt1ag0

Reputation: 824

How to use media queries in phonegap

I am developing an app using phonegap.I had already made my app which is compatible with 320 x 480 resolution screen.Now I am using media queries to make it compatible with 480 x 800 screen as well as higher resolutions as follows

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

<!-- style1 -->
<link rel="stylesheet" media="only screen and (min-width: 200px) and (max-width: 320px) and (orientation: portrait)" href="style.css">
<!-- style2 -->
<link rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait)" href="style2.css">
<!-- style3 -->
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)" href="medium-style.css">

Now the problem is that when I run the application in 480x 800 resolution screen then instead of using style2 it is using style1.I also tried using a single stylesheet and removing the viewport.I am also unable to find any phonegap documentation related to media queries.Please help

Upvotes: 2

Views: 2638

Answers (2)

biodiv
biodiv

Reputation: 627

Instead of spending hours on media queries (there are conflicts due to different interpretation across Android versions, and many more other disappointments) you can try https://github.com/biodiv/cordova-screengod which does the job of scaling for you. You develop for one device and let the software scale your css to match the current device. Implementation is only a one-liner

screengod(['path/to/my.css'],function(){
    /* do your app stuff */
});

and it also fixes screen problems like getting 320x480 on high-dpi devices. Furthermore, your css (without media queries!) not only works across Android devices, but all iOS and windows devices aswell, enabling you to write once - deploy everywhere.

Upvotes: 1

NEOLPAR
NEOLPAR

Reputation: 382

You could use

html

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

css
/*240 - 320*/
@media (min-width: 320px) {
/*320 - 480*/
@media (min-width : 480px) {
/*480 - ...*/

....

//retina devices
@media only screen and (-webkit-min-device-pixel-ratio: 2.0)

The min-width is to Mobile First media queries.

Upvotes: 2

Related Questions