Warum sieht meine App auf hochauflösenden Android-Telefonen kleiner aus?
-
20-12-2019 - |
Frage
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.
Lösung 2
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.
Andere Tipps
Füge das hinzu meta
Tag in deinem head
:
<meta name="viewport" content="width=device-width, initial-scale=1.0">