Pourquoi mon application semble-t-elle plus petite sur les téléphones Android haute résolution ?

Question

J'ai développé une application à l'aide de Phone Gap d'Adobe, en la vérifiant principalement sur Safari mobile, Desktop Firefox et Desktop Chrome, mais lorsque je l'ai vérifiée sur des appareils Android haute résolution (HRD), toutes mes polices et mesures (calculées en REM) étaient deux fois moins grandes. .

J'ai essayé de résoudre ce problème avec :

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

... mais même si cela donnait aux HRD Android un aspect normal, les appareils iOS HRD semblent désormais trop grands.Quelle est la meilleure façon de corriger cet écart ?J'ai examiné les requêtes multimédias spécifiques à Android, mais cela signifierait en ajouter environ 20 et il n'y a aucune garantie qu'elles affecteraient spécifiquement les appareils Android.

Answer 1

Selon Une conversation par Mike Stamm au CSSCONF Le problème était en réalité dans le Cible-densityDPI Attribut de la balise Meta Viewport, quelle utilise Android, mais Apple ignore.Il devrait être:

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

Apparemment, cela résout le problème avec la plupart des périphériques Android (bien que certains appareils Android nécessitent Cible-densitensdpi= 140 ).

liée: Cette vidéo liée ci-dessus a des raisons historiques intéressantes des différences dans les écrans IOS et Android.

Answer 2

Ajoute ça meta étiquette dans votre head:

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