How to deal with width inconsistency between androids 4.0-4.3 and 4.4 on Cordoba or Phonegap?

Question

I am making an application on Cordova 3.4 and testing on Moto X with Android 4.4.2, Samsung Galaxy Ace with Android 2.3 and emulator. I leave the original viewport created by Kli:

<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" /> 

In css, I work with relative sizes:

 html { font-size: 62.5%; } p { font-size: 1.4rem; } 

This job works fine on both devices, but when I tested on the LG G2 with Android 4.2.2, I see that the text is smaller. I tested it with all versions of Android 4.x on the emulator and found the same problem in versions 4.0 through 4.3, and then found that Android 4.4.2 now uses Chrome, and ViewPort does not work like that.

Based on some articles, the normal behavior on the retina screen, such as screens, is that the css width is less than the width of the device, and it works on Android 4.4.2, but it works different in 4.0-4.4. This is a comparison of some javascript properties between 4.4.2 and 4.2.2 using an emulator configured with these parameters: screen: 4.7 ", resolution: 720x1280, size: normal, screen ratio: long, density: xhdpi.

 4.4.2 - window.devicePixelRatio: 2 - screen.width: 360 - document.width: 360 - window.innerWidth: 360 - document.documentElement.clientWidth: 360 - document.documentElement.offsetWidth: 360 - document.body.clientWidth: 360 4.2.2 - window.devicePixelRatio: 2 - screen.width: 720 - document.width: 720 - window.innerWidth: 720 - document.documentElement.clientWidth: 720 - document.documentElement.offsetWidth: 720 - document.body.clientWidth: 720 

The workaround I'm trying to use is using media queries, but I think this could be a problem on tablets or other devices.

 html { font-size: 125%; } @media all and (max-width: 400px) { html { font-size: 62.5%; } } 

Another solution might be checking the version of Android to set the html font size.

What is the best way to deal with this inconsistency between Android 4.0-4.3 and 4.4?

Answer 1

I found a problem when working with this warning on the console: Viewport target-densitydpi is not supported. I found a search for this warning in this blog post , target-densitydpi out of date.

The problem is that the target-densitydpi=device-dpi attribute tells the viewport to have the CSS pixel width equal to the device pixel width. Since the Chrome widget on Android 4.4.2 ignores this attribute, it scales the width of the CSS pixels.

By removing this attribute, I got this result:

 4.2.2 - screen.width: 720 - document.width: 360 4.4.2 - screen.width: 360 - document.width: 360 

In Android 4.2.2, screen.width does not work as expected, because this property should return the width of the pixels of the device, but this is not a problem, because now my layout looks the same on Android 4.4.2 and 4.2.2 after removing the target-densitydpi attribute target-densitydpi (I also deleted the media query alternative posted in the question).