Perché la mia app sembra più piccola su telefoni Android ad alta risoluzione?

Question

Ho sviluppato un'applicazione che utilizza il divario del telefono di Adobe, per lo più controllandolo su Safari mobile, Desktop Firefox e Desktop Chrome, ma quando l'ho controllato su dispositivi Android ad alta risoluzione (HRDS) tutti i miei font e misurazioni (calcolati in REMS) erano statimezza grande.

Ho provato a sistemarlo con:

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

.

... Ma mentre ha reso Android HRDS sembra normale, ora i dispositivi IOS HRDS sembrano troppo grande.Qual è il modo migliore per correggere questa discrepanza?Ho esaminato le query dei media specifici per Android, ma ciò significherebbe aggiungere come 20 e non vi è alcuna garanzia che avrebbero influito in modo specifico per i dispositivi Android.

Answer 1

Secondo un discorso di Mike Stamm a CSsconf Il problema è stato effettivamente in Attributo Target-DensitàDPI nel tag Meta ViewPort, che Android utilizza, ma Apple ignora.Dovrebbe essere:

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

.

Apparentemente che risolve il problema con la maggior parte dei dispositivi Android, (sebbene alcuni dispositivi Android richiedano Target-DensitàDPI= 140 ).

correlati: quel video collegato sopra ha alcuni motivi storici interessanti alla base delle differenze nei display iOS e Android.

Answer 2

Aggiungi questo tag meta nel tuo head:

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