¿Por qué mi aplicación se ve más pequeña en teléfonos Android de alta resolución?

Question

Desarrollé una aplicación usando la brecha telefónica de Adobe, lo que lo revisa en su mayoría en Safari Mobile, Firefox y escritorio Chrome, pero cuando lo revisé en dispositivos de alta resolución Android (HRD), todas mis fuentes y mediciones (calculadas en REMS) fueronla mitad de grande.

Intenté arreglar esto con:

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

... pero mientras hizo que los HRD de Android se ven normales, ahora los dispositivos HRDS IOS se ven demasiado grandes.¿Cuál es la mejor manera de corregir esta discrepancia?Miré a las consultas de medios específicas de Android, pero eso significaría agregar como 20 de ellos y no hay garantía de que estén afectando específicamente los dispositivos Android.

Answer 1

De acuerdo con una charla de Mike Stamm en CSSCONF El problema fue en realidad en el Target-DensityDPI Atributo en la etiqueta Meta Viewport, que utiliza Android, pero Apple ignora.Debe ser:

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

Aparentemente que resuelve el problema con la mayoría de los dispositivos Android, (aunque algunos dispositivos Android requieren Desteled-DenseDPI= 140 ).

Relacionado: ese video vinculado anteriormente tiene algunas razones históricas interesantes detrás de las diferencias en las pantallas IOS y Android.

Answer 2

Añadir esta etiqueta GeneracDicEtGodeGode en su meta:

head