Por que meu aplicativo parece menor em telefones Android de alta resolução?

Question

Desenvolvi um aplicativo usando o Phone Gap da Adobe, verificando-o principalmente no Safari móvel, Desktop Firefox e Desktop Chrome, mas quando verifiquei em dispositivos Android de alta resolução (HRDs), todas as minhas fontes e medidas (calculadas em REMs) tinham metade do tamanho .

Eu tentei consertar isso com:

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

...mas embora tenha feito os HRDs Android parecerem normais, agora os dispositivos iOS HRDs parecem excessivamente grandes.Qual é a melhor maneira de corrigir essa discrepância?Analisei consultas de mídia específicas do Android, mas isso significaria adicionar cerca de 20 delas e não há garantia de que afetariam especificamente os dispositivos Android.

Answer 1

De acordo com uma palestra de Mike Stamm na CSSConf o problema estava realmente no dpi de densidade alvo atributo na meta tag viewport, que o Android usa, mas a Apple ignora.Deveria ser:

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

Aparentemente, isso resolve o problema com a maioria dos dispositivos Android (embora alguns dispositivos Android exijam densidade-alvo dpi = 140).

Relacionado:o vídeo vinculado acima tem algumas razões históricas interessantes por trás das diferenças nas telas do iOS e do Android.

Answer 2

Adicione isso meta marque em seu head:

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