Why does my app look smaller on High Resolution Android phones?

Question

I developed an app using Adobe's Phone Gap, mostly checking it on mobile Safari, Desktop Firefox and Desktop Chrome, but when I checked it on Android High Resolution Devices (HRDs) all of my fonts and measurements (calculated in REMs) were half as large.

I tried fixing this with:

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx){
    html{
        /*font-size:125%;*/
    }
}

...but while it made Android HRDs look normal, now iOS HRDs devices look overly large. What is the best way to correct this discrepancy? I looked into Android-specific media queries, but that would mean adding like 20 of them and there is no guarantee that they would be affecting Android devices specifically.

Answer 1

According to a talk by Mike Stamm at CSSConf the problem was actually in the target-densitydpi attribute in the meta viewport tag, which Android uses, but Apple ignores. It should be:

<meta name="viewport" content="target-densitydpi=160">

Apparently that solves the problem with most Android devices, (although some Android devices require target-densitydpi=140).

Related: that video linked above has some interesting historical reasons behind the differences in iOS and Android displays.

Answer 2

Add this meta tag in your head:

<meta name="viewport" content="width=device-width, initial-scale=1.0">