Menu
If not, is there a list of screen resolutions for the most popular Android phones and tablets.
354
320dp: Typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc.) 480dp: Large phone screen ~5" (480x800 mdpi) 600dp: 7” tablet (600x1024 mdpi) 720dp: 10” tablet (720x1280 mdpi, 800x1280 mdpi, etc.)
Resolution and pixel density Average tablets have a resolution of 1920x1080 pixels. On those tablets, you can watch a movie in Full HD. The higher the number of pixels, the sharper the image.
Screen Resolution Stats Worldwide: Jan 2020 – Jan 2021 According to the Worldwide Screen Resolution Stats (Jan 2020 – Jan 2021), the most commonly used resolutions across mobile, desktop, and tablet are: 1920×1080 (8.89%)
(out of date) Spreadsheet of device metrics.
SEE ALSO:
Device Metrics - Material Design.
Screen Sizes.
--------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- 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 --------------------------- ----- ------------ --------------- ------- ----------- ---------------- --- ---------- Coping with different aspect ratios
The different aspect ratios seen above are (from most square; 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 If you skip the extreme aspect ratios, that are rarely seen at phone size or larger, all the other devices fit a range from 1.3333 to 1.7778, which conveniently matches the current iPhone/iPad ratios (considering all devices in portrait mode). Note that there are quite a few variations within that range, so if you are creating a small number of fixed aspect-ratio layouts, you will need to decide how to handle the odd "in-between" screens.
Minimum "portrait mode" solution is to support 1.3333, which results in unused space at top and bottom, on all the resolutions with larger aspect ratio.
Most likely, you would instead design it to stretch over the 1.333 to 1.778 range. But sometimes part of your design looks too distorted then.
Advanced layout ideas:
For text, you can design for 1.3333, then increase line spacing for 1.666 - though that will look quite sparse. For graphics, design for an intermediate ratio, so that on some screens it is slightly squashed, on others it is slightly stretched. geometric mean of Sqrt(1333 x 1667) ~= 1491. So you design for 1491 x 1000, which will be stretched/squashed by +-12% when assigned to the extreme cases.
Next refinement is to design layout as a stack of different-height "bands" that each fill the width of the screen. Then determine where you can most pleasingly "stretch-or-squash" a band's height, to adjust for different ratios.
For example, consider imaginary phones with 1333 x 1000 pixels and 1666 x 1000 pixels. Suppose you have two "bands", and your main "band" is square, so it is 1000 x 1000. Second band is 333 x 1000 on one screen, 666 x 1000 on the other - quite a range to design for.
You might decide your main band looks okay altered 10% up-or-down, and squash it 900 x 1000 on the 1333 x 1000 screen, leaving 433 x 1000. Then stretch it to 1100 x 1000 on 1666 x 1000 screen, leaving 566 x 1000. So your second band now needs to adjust over only 433 to 566, which has geometric mean of Sqrt(433 x 566) ~= 495. So you design for 495 x 1000, which will be stretched/squashed by +-14% when assigned to the extreme cases.
72
answered Sep 21 '22 18:09
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With