(veraltet) Tabelle mit Gerätemetriken.
SIEHE AUCH:
Gerätemetriken - Materialdesign .
Bildschirmgrößen .
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
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
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ----------
Umgang mit unterschiedlichen Seitenverhältnissen
Die verschiedenen oben gezeigten Seitenverhältnisse sind (vom meisten Quadrat; 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
Wenn Sie die extremen Seitenverhältnisse überspringen, die bei Telefongrößen oder größer selten zu sehen sind , passen alle anderen Geräte in einen Bereich von 1,3333 bis 1,7778, der bequem den aktuellen iPhone / iPad-Verhältnissen entspricht (unter Berücksichtigung aller Geräte im Hochformat) . Beachten Sie, dass es innerhalb dieses Bereichs einige Variationen gibt. Wenn Sie also eine kleine Anzahl von Layouts mit festem Seitenverhältnis erstellen, müssen Sie entscheiden, wie mit den ungeraden "Zwischen" -Bildschirmen umgegangen werden soll.
Die minimale "Portrait-Modus" -Lösung besteht darin, 1,3333 zu unterstützen, was bei allen Auflösungen mit größerem Seitenverhältnis zu unbenutztem Speicherplatz oben und unten führt.
Höchstwahrscheinlich würden Sie es stattdessen so gestalten, dass es sich über den Bereich von 1,333 bis 1,778 erstreckt. Aber manchmal sieht ein Teil Ihres Designs dann zu verzerrt aus.
Erweiterte Layout-Ideen:
Für Text können Sie für 1.3333 entwerfen und dann den Zeilenabstand für 1.666 erhöhen - obwohl dies recht spärlich aussieht. Entwerfen Sie für Grafiken ein mittleres Verhältnis , sodass es auf einigen Bildschirmen leicht gequetscht und auf anderen leicht gedehnt wird. geometrisches Mittel von Sqrt (1333 x 1667) ~ = 1491. Sie entwerfen also für 1491 x 1000, das bei Zuordnung zu den Extremfällen um + -12% gedehnt / gequetscht wird.
Die nächste Verfeinerung besteht darin, das Layout als Stapel von "Bändern" unterschiedlicher Höhe zu entwerfen , die jeweils die Breite des Bildschirms ausfüllen . Bestimmen Sie dann, wo Sie die Höhe eines Bandes am angenehmsten "dehnen oder quetschen" können, um verschiedene Verhältnisse einzustellen.
Stellen Sie sich beispielsweise imaginäre Telefone mit 1333 x 1000 Pixel und 1666 x 1000 Pixel vor. Angenommen, Sie haben zwei "Bänder" und Ihr Haupt- "Band" ist quadratisch, also 1000 x 1000. Das zweite Band ist 333 x 1000 auf einem Bildschirm, 666 x 1000 auf dem anderen - eine ziemliche Auswahl.
Sie können entscheiden, ob Ihr Hauptband in Ordnung aussieht, wenn es um 10% nach oben oder unten geändert wird, und es 900 x 1000 auf dem 1333 x 1000-Bildschirm quetschen, wobei 433 x 1000 übrig bleiben. Dehnen Sie es dann auf 1100 x 1000 auf dem 1666 x 1000-Bildschirm und lassen Sie 566 übrig x 1000. Ihr zweites Band muss jetzt nur noch über 433 bis 566 eingestellt werden, was einen geometrischen Mittelwert von Sqrt (433 x 566) ~ = 495 hat. Sie entwerfen also für 495 x 1000, das um + -14 gedehnt / gequetscht wird % bei Zuordnung zu den Extremfällen.