1

I am working with Phonegap Build and I cannot get Android media queries to work. I have working iOS queries but the Android ones are not responding.

When I test in the browser it works but on the device after building it does not.

My Queries:

/* <- 480*/
@media screen and (max-height: 507px){
}

/*508 / 530*/
@media screen and (min-height: 508px) and (max-height: 530px){
}

/*531 / 567*/
@media screen and (min-height: 531px) and (max-height: 567px){
}

/*568 / 600*/
@media screen and (min-height: 568px) and (max-height: 600px){
}

/*601 / 650*/
@media screen and (min-height: 601px){
}

Meta Tag

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
  • Sounds similar to this question: http://stackoverflow.com/questions/17102161/how-to-use-media-queries-for-android-devices-with-android-version-2-2-1-and-2-3 – Brian Jun 20 '15 at 00:19

2 Answers2

0

@Matt, what does not working mean? Can you describe what is supposed to happen that does not? Also, Screen sizes are not always reported correctly. You can check you screen size with my ScreenSize App. The App includes links to other places you can check for answers on media queries.

  • When I say "they aren't working" I mean that the media queries aren't being reflected and the original css is displayed instead of the conditional css per screen size. What doesn't make sense to me especially is that since I am using media queries that range in size, you would think that they would catch devices since there is such a broad spectrum. Perhaps could it be something having to do with pixel-ratios? – Matt Butler Jun 20 '15 at 00:50
  • @Matt, I seriously doubt this has anything to do with dpi (dot per inch/pixel ratios). You can read a [very good article](http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html) on that from PPK. I think you should check your screen size. Then try you layout code on Google Chrome or the latest firefox, both emulation modes for use with mobile development. On firefox, use ctr-shift-m On chrome, use ctrl-shift-i You should be able to test change the virtual device, or resize the view-port in emulated mode. –  Jun 20 '15 at 04:26
  • That's the thing, I am using those tools for testing and everything looks great. Then when I deploy using phonegap build things don't behave as expected. Weird huh? – Matt Butler Jun 20 '15 at 13:24
0

Sorry been busy on a blog post.

I built two (2) quick trial Apps to test what the problem could be. With my boilerplate App, I added media queries; it is not responsive to rotation after the initial state (so it does NOT reflow)(APP #1). I've additionally test this with the new webview engine, crosswalk, it seems to have similar issues(App #2]). It appears we will have to force reflow. I don't have time implement any solutions, but from what I've read in the last 15 minutes, what needs to be do is a zero size insertion and removal of an HTML element.

Feel free to use my code, or make a pull request. If you pull, I'll add this to my Demo Apps. Of course, you'll get credit on this. ;-)

I have not test any of the suggestions. Here is my lookup query:
https://www.google.com/search?q=html+force+reflow

8 hours later I just realized I have not tested the InAppBrowser. That may handle the reflow correctly.

Jesse

  • I am sorry, but how do I "reflow" the application exactly? – Matt Butler Jun 26 '15 at 03:10
  • In the link I posted (https://www.google.com/search?q=html+force+reflow), there are several solutions in the first few links. Such as, http://stackoverflow.com/a/3485654/3255670 Here is another article that explains [css reflow](https://www.google.com/search?q=css+reflow) — [Minimizing browser reflow ](https://developers.google.com/speed/articles/reflow) If you need additional explanation or help on this, please ask. –  Jun 26 '15 at 04:19
  • Ok, I think that you may have possibly misunderstood my initial question. I am not having problems with the app after it has been launched for some time, but rather right away at the boot. My media queries are not activating for Android when I build with Phonegap Build, but when I test the code in the browser (resizing to the appropriate dimensions) it works just fine. Any solution for this? – Matt Butler Jun 26 '15 at 04:53
  • Is this meta element in your --->> `````` ? –  Jun 26 '15 at 05:05
  • If you have included the "meta" tag in your "head", then what devices are you testing with? Because I think you are saying: #1 you build an App with Phonegap Build. #2 You launch the App on your device. #3 The initial view (or html-page) is NOT scaled correctly. #4 After some time the html-page renders correctly. \\\\\\\\\\\\\\\\\\\\ If this is correct, you have something in your CSS that is causing the delay. If this is not correct, you may have a bug. \\\\\\\\\\\\\\\\\\\\\ Bottom line: media queries are working, so your code should work, bar quirks or bugs in the API. –  Jun 26 '15 at 05:13
  • Please see the added meta tag above. The html page is not rendering correctly from the start and it doesn't ever format correctly. That is the problem that I am facing. – Matt Butler Jun 26 '15 at 18:03
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/81680/discussion-between-jessemonroy650-and-matt-butler). –  Jun 26 '15 at 19:58