Warum sieht meine App auf hochauflösenden Android-Telefonen kleiner aus?

Question

Ich habe eine App mit Phone Gap von Adobe entwickelt und sie hauptsächlich auf mobilen Safari-, Desktop-Firefox- und Desktop-Chrome-Geräten überprüft. Als ich sie jedoch auf hochauflösenden Android-Geräten (HRDs) überprüfte, waren alle meine Schriftarten und Maße (berechnet in REMs) halb so groß .

Ich habe versucht, das Problem zu beheben mit:

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

...aber während Android HRDs dadurch normal aussahen, sehen iOS HRDs-Geräte jetzt übermäßig groß aus.Wie lässt sich diese Diskrepanz am besten korrigieren?Ich habe mir Android-spezifische Medienabfragen angesehen, aber das würde bedeuten, etwa 20 davon hinzuzufügen, und es gibt keine Garantie dafür, dass sie sich speziell auf Android-Geräte auswirken würden.

Answer 1

nach ein Talk von Mike Stamm bei CsSconf Das Problem war eigentlich in der Target-DensityDpi Attribut im Meta-Ansichtsfenster-Tag, das Android verwendet, aber Apple ignoriert.Es sollte sein:

generasacodicetagpre.

anscheinend löst das Problem mit den meisten Android-Geräten (obwohl einige Android-Geräte target-densitydpi= 140 erfordern).

Verwandte: Das oben verknüpfte Video hat einige interessante historische Gründe für die Unterschiede in iOS- und Android-Displays.

Answer 2

Füge das hinzu meta Tag in deinem head:

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