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

Question

I'm doing an application on Cordova 3.4 and testing on the Moto X with Android 4.4.2, Samsung Galaxy Ace with android 2.3 and the emulator. I leave the original viewport created by the cli:

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

On the css I'm working with relative sizes:

html {
    font-size: 62.5%;
}

p {
    font-size: 1.4rem;
}

This work fine on both devices, but when I tested on a LG G2 with Android 4.2.2, I see the text smaller. I tested it with all the 4.x Android versions on the emulator, and found the same problem on 4.0 to 4.3 versions, and then I found that Android 4.4.2 now use Chrome and the ViewPort doesn't work the same way.

Based on some articles, the normal behaviour on retina display like screens is that the css width is smaller that the device width, and this is the way it's working on Android 4.4.2, but in 4.0 to 4.3 work different. This is a comparison of some javascript properties between 4.4.2 and 4.2.2 using the emulator configured with this 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

A temporal solution I'm trying is using media queries, but I think it 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 could be to check the Android version 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 the problem while dealing with this warning on the console: Viewport target-densitydpi is not supported. Searching about this warning, I found on this blog post that target-densitydpi is deprecated.

The problem is that the attribute target-densitydpi=device-dpi tells the viewport to make the CSS pixels' width equal to the device pixels' width. Because the Chrome viewport on Android 4.4.2 ignores that attribute, it scales the CSS pixels width.

Removing that attribute, I got this result:

4.2.2

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

4.4.2

- screen.width: 360
- document.width: 360

On Android 4.2.2, screen.width doesn't work as expected, because that property must return the device pixels' width, but it's 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 (I also removed the media query alternative posted on the question).