0

For cordova android application, I created one css for 1080 x 1920 screen resolutions and accessing using media query

@media screen and (max-width: 680px) and (orientation:portrait) //Galaxy S5 compatible

or

@media screen and (device-height : 1920px) and (device-width : 1080px) and (orientation:portrait) // Galaxy S4 compatible

CSS works fine on S4 device, but seems to be enlarged and broken on S5 device which having same screen resolution as S4.

Meta data is defined as <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

Please suggest what changes I need to make to resolve this issue and to use same CSS for Galaxy S4 and S5 devices

enter image description here

Timson
  • 1,337
  • 3
  • 19
  • 32

2 Answers2

0

Update

Try to use @media screen and min/max-device-width.

For example:

/* Android Tablet (landscape) style */
@media only screen and (min-device-width : 800px) and (max-device-width : 1280px) and (orientation : landscape) {
}

device-width: is the screen or the entire page, rather than just the rendering area as the document window.

[First answer]

I also had this issue. Try this:

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

target-densitydpi=medium-dpi seems to fix this. Let me know.

For your media queries: use max-device-width after max-width. See:

Community
  • 1
  • 1
athom
  • 313
  • 1
  • 11
  • tried and not working. However I found some other issue, when I try to console.log screen height from S4 Device, it is 1840 px height, but in S5 it logs only 615px. Does this seems to be the issue? – Timson Feb 09 '15 at 13:02
  • Compare the height with JavaScript by using: var h = document.body.clientHeight; console.log('height: ' + h); – athom Feb 09 '15 at 13:08
  • document.body.clientHeight is 1845, and console.log("height"+height) is 615 – Timson Feb 09 '15 at 13:12
  • Okay, what about the difference between the 2 devices ? – athom Feb 09 '15 at 13:16
  • OS for S4 is 4.3 for our testing and for S5 is 4.4 – Timson Feb 09 '15 at 13:22
  • I guess doing this 'content="user-scalable=no' would be bad. – Abhinav Gauniyal Feb 09 '15 at 13:47
  • No! You should use user-scalable=no on a hybrid app. When you create a cordova project, it is the default value. I updated my answer, let me know if you get better results :) – athom Feb 09 '15 at 13:51
  • This code looks like a polyfill to support orientation on many devices and different OS versions: http://snipplr.com/view/67341/android-and-iphone--modern-css-media-queries/ – athom Feb 09 '15 at 13:57
  • athom, it seems to be Viewport is not detected on the screen, Tried without even providing meta tag, and screen remains the same. Any issues with viewport and Android 4.4 ? – Timson Feb 09 '15 at 14:03
  • Since Android 4.4, the WebView is based on Chromium. This change upgrades WebView performance and standards support for HTML5, CSS3, and JavaScript to match the latest web browsers. On the other hand, JellyBean support less HTML5/CSS3 animations etc. Viewport is always detected.. Are the topbar's height and the font-size specified in pixel, points or in percentage? I think the problem is here, it is better to specify elements in pixel. – athom Feb 09 '15 at 14:13
  • Try to comment the responsive style and to change your viewport like this: Sorry if I repeat myself, but it should fix the topbar's height & the font-size according your screenshot. Check out this: http://stackoverflow.com/questions/15194940/phonegap-application-text-and-layout-too-small If this works, then you need to change your media queries (the main problem) :) – athom Feb 09 '15 at 14:29
0

The issue was with scaling on Android OS 4.4 Webkit. I found the resolution by adjusting the Initial scaling of App by

 Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
 int width = display.getWidth(); 
 int height = display.getHeight(); 

 // calculate target scale (only dealing with portrait orientation)
 double globalScale = Math.ceil( ( width / ORIG_APP_W ) * 100 );

 // set the scale
 this.appView.setInitialScale( (int)globalScale );

as explained on : Scaling fixes for Android devices in Phonegap

Thanks for the support

Timson
  • 1,337
  • 3
  • 19
  • 32