(non aggiornato) Foglio di calcolo delle metriche del dispositivo.
VEDERE ANCHE:
Device Metrics - Material Design .
Dimensioni dello schermo .
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Galaxy Y 320 x 240 ldpi 0.75 120 427 x 320 4:3 1.3333 427 x 320
? 400 x 240 ldpi 0.75 120 533 x 320 5:3 1.6667 533 x 320
? 432 x 240 ldpi 0.75 120 576 x 320 9:5 1.8000 576 x 320
Galaxy Ace 480 x 320 mdpi 1 160 480 x 320 3:2 1.5000 480 x 320
Nexus S 800 x 480 hdpi 1.5 240 533 x 320 5:3 1.6667 533 x 320
"Galaxy SIII Mini" 800 x 480 hdpi 1.5 240 533 x 320 5:3 1.6667 533 x 320
? 854 x 480 hdpi 1.5 240 569 x 320 427:240 1.7792 569 x 320
Galaxy SIII 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
Galaxy Nexus 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
HTC One X 4.7" 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
Nexus 5 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 YES 592 x 360
Galaxy S4 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
HTC One 5" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
Galaxy Note III 5.7" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
HTC One Max 5.9" 1920 x 1080 xxhdpi 3 480 640 x 360 16:9 1.7778 640 x 360
Galaxy Note II 5.6" 1280 x 720 xhdpi 2 320 640 x 360 16:9 1.7778 640 x 360
Nexus 4 4.4" 1200 x 768 xhdpi 2 320 600 x 384 25:16 1.5625 YES 552 x 384
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
? 800 x 480 mdpi 1 160 800 x 480 5:3 1.6667 800 x 480
? 854 x 480 mdpi 1 160 854 x 480 427:240 1.7792 854 x 480
Galaxy Mega 6.3" 1280 x 720 hdpi 1.5 240 853 x 480 16:9 1.7778 853 x 480
Kindle Fire HD 7" 1280 x 800 hdpi 1.5 240 853 x 533 8:5 1.6000 853 x 533
Galaxy Mega 5.8" 960 x 540 tvdpi 1.33333 213.333 720 x 405 16:9 1.7778 720 x 405
Sony Xperia Z Ultra 6.4" 1920 x 1080 xhdpi 2 320 960 x 540 16:9 1.7778 960 x 540
Blackberry Priv 5.43" 2560 x 1440 ? 540 ? 16:9 1.7778
Blackberry Passport 4.5" 1440 x 1440 ? 453 ? 1:1 1.0
Kindle Fire (1st & 2nd gen) 7" 1024 x 600 mdpi 1 160 1024 x 600 128:75 1.7067 1024 x 600
Tesco Hudl 7" 1400 x 900 hdpi 1.5 240 933 x 600 14:9 1.5556 933 x 600
Nexus 7 (1st gen/2012) 7" 1280 x 800 tvdpi 1.33333 213.333 960 x 600 8:5 1.6000 YES 912 x 600
Nexus 7 (2nd gen/2013) 7" 1824 x 1200 xhdpi 2 320 912 x 600 38:25 1.5200 YES 864 x 600
Kindle Fire HDX 7" 1920 x 1200 xhdpi 2 320 960 x 600 8:5 1.6000 960 x 600
? 800 x 480 ldpi 0.75 120 1067 x 640 5:3 1.6667 1067 x 640
? 854 x 480 ldpi 0.75 120 1139 x 640 427:240 1.7792 1139 x 640
Kindle Fire HD 8.9" 1920 x 1200 hdpi 1.5 240 1280 x 800 8:5 1.6000 1280 x 800
Kindle Fire HDX 8.9" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800
Galaxy Tab 2 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800
Galaxy Tab 3 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800
ASUS Transformer 10" 1280 x 800 mdpi 1 160 1280 x 800 8:5 1.6000 1280 x 800
ASUS Transformer 2 10" 1920 x 1200 hdpi 1.5 240 1280 x 800 8:5 1.6000 1280 x 800
Nexus 10 10" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800
Galaxy Note 10.1 10" 2560 x 1600 xhdpi 2 320 1280 x 800 8:5 1.6000 1280 x 800
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Device Inches ResolutionPX Density DPI ResolutionDP AspectRatios SysNavYorN ContentResolutionDP
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Affrontare diverse proporzioni
I diversi rapporti di aspetto visti sopra sono (dalla maggior parte dei quadrati; h / w):
1:1 1.0 <- rare for phone; common for watch
4:3 1.3333 <- matches iPad (when portrait)
3:2 1.5000
38:25 1.5200
14:9 1.5556 <- rare
25:16 1.5625
8:5 1.6000 <- aka 16:10
5:3 1.6667
128:75 1.7067
16:9 1.7778 <- matches iPhone 5-7
427:240 1.7792 <- rare
37:18 2.0555 <- Galaxy S8
Se salti le proporzioni estreme, che si vedono raramente con dimensioni del telefono o più grandi, tutti gli altri dispositivi si adattano a un intervallo da 1.3333 a 1.7778, che corrisponde convenientemente agli attuali rapporti iPhone / iPad (considerando tutti i dispositivi in modalità verticale) . Nota che ci sono alcune variazioni all'interno di tale intervallo, quindi se stai creando un piccolo numero di layout con proporzioni fisse, dovrai decidere come gestire le schermate dispari "intermedie".
La soluzione minima in "modalità ritratto" consiste nel supportare 1.3333, che si traduce in spazio inutilizzato in alto e in basso, su tutte le risoluzioni con proporzioni maggiori.
Molto probabilmente, lo progetteresti invece per estendersi nell'intervallo da 1.333 a 1.778. Ma a volte una parte del tuo design sembra troppo distorta allora.
Idee di layout avanzate:
Per il testo, puoi progettare per 1.3333, quindi aumentare l'interlinea per 1.666, anche se sembrerà piuttosto scarso. Per la grafica, progettare per un rapporto intermedio , in modo che su alcuni schermi sia leggermente schiacciato, su altri leggermente allungato. media geometrica di Sqrt (1333 x 1667) ~ = 1491. Quindi si progetta per 1491 x 1000, che verrà allungato / schiacciato di + -12% quando assegnato ai casi estremi.
Il successivo perfezionamento consiste nel progettare il layout come una pila di "bande" di diversa altezza che riempiono ciascuna la larghezza dello schermo . Quindi determina dove puoi più piacevolmente "allungare o schiacciare" l'altezza di una fascia, per regolare i diversi rapporti.
Ad esempio, considera telefoni immaginari con 1333 x 1000 pixel e 1666 x 1000 pixel. Supponi di avere due "bande" e la tua "banda" principale è quadrata, quindi è 1000 x 1000. La seconda banda è 333 x 1000 su uno schermo, 666 x 1000 sull'altro: un intervallo abbastanza da progettare.
Potresti decidere che la tua banda principale sembra a posto alterata del 10% su o giù e schiacciarla 900 x 1000 sullo schermo 1333 x 1000, lasciando 433 x 1000. Quindi allungala a 1100 x 1000 sullo schermo 1666 x 1000, lasciando 566 x 1000. Quindi la tua seconda banda ora deve regolare solo da 433 a 566, che ha una media geometrica di Sqrt (433 x 566) ~ = 495. Quindi progetti per 495 x 1000, che sarà allungato / schiacciato di + -14 % se assegnato ai casi estremi.