Client wants to have layout for the mobile app adjusted according to aspect ratio of screen: http://screensiz.es/phone and not just some width/height breakpoints. They want for example to cover 3:5 and/or 9:16. So I'm using media queries for aspect ratio. I'm developing the app in jQuery Mobile and using PhoneGap Build for compiling. I have consulted this answer and this answer, but I can't detect right aspect ratios. Page: http://pavlov.rs/ht/index.html
When I open it in mobile browser on Samsung Galaxy S2 I get:
Dimensions = 320x229
Gcd = 1
Aspect = 320:229
Ratio is 32x45 (from media queries)
But when I compile that page with PhoneGap and open the app I get:
Dimensions = 320x508
Gcd = 4
Aspect = 80x127
Ratio is 32x45 (from media queries)
Is there some safe and bulletproof way working with those kind of media queries and specifically with jQM and PhoneGap combination?
Thanks.