Các thông số kỹ thuật của màn hình điện thoại trong thiết kế giao diện UI

Nếu bạn đang thiết kế giao diện cho các ứng dụng hoặc trang web trên thiết bị di động như smartphone hay tablet, chắc bạn sẽ cần phải biết những con số này. Giao diện của bạn không cần phải đạt được tương thích 100% những con số này nếu và khi chúng trở thành tiêu chuẩn trên thiết bị di động, nhưng điều quan trọng vẫn là phải hiểu những nỗ lực của bạn sẽ được người dùng và khách hàng tiềm năng nhìn nhận như thế nào như nhau.

• Viewport (chiều rộng / chiều cao của khung nhìn trình duyệt mặc định)
• Resolution – Độ phân giải (chiều rộng / chiều cao tính bằng pixel)
• Diagonal screensize – Kích thước màn hình theo đường chéo (inch)
• DPI (pixel trên inch)

Nắm được các thông số kỹ thuật của màn hình điện thoại thông minh cho phép bạn điều chỉnh giao diện và tạo trải nghiệm tốt hơn cho người dùng của mình. Điều chỉnh giao diện web và ứng dụng theo khung nhìn, độ phân giải, kích thước màn hình và DPI của gần 53.000 thiết bị trong thời gian thực, giúp nỗ lực tối ưu hóa nội dung của bạn vượt trội so với các đối thủ cạnh tranh.

Chế độ xem, độ phân giải, kích thước màn hình chéo và DPI các điện thoại thông minh phổ biến nhất

Apple iPhone

Model	Viewport	Resolution	Diagonal Screensize	DPI
iPhone XR	414×896	828×1792	6.1 inch	326
iPhone XS Max	414×896	1242×2688	6.5 inch	458
iPhone XS	375×812	1125×2436	5.8 inch	458
iPhone X	375×812	1125×2436	5.8 inch	463
iPhone 8 Plus	414×736	1080×1920	5.5 inch	401
iPhone 8	375×667	750×1334	4.7 inch	326
iPhone 7 Plus	414×736	1080×1920	5.5 inch	401
iPhone 7	375×667	750×1334	4.7 inch	326
iPhone 6S Plus	414×736	1080×1920	5.5 inch	401
iPhone 6S	375×667	750×1334	4.7 inch	326
iPhone 6	375×667	750×1334	4.7 inch	326

Samsung

Model	Viewport	Resolution	Diagonal Screensize	DPI
Galaxy S9 Plus	412×846	1440×2960	6.2 inch	531
Galaxy S9	360×740	1440×2960	5.8 inch	568
Galaxy Note 8	360×740	1440×2960	6.3 inch	522
Galaxy S8 Plus	412×846	1440×2960	6.2 inch	531
Galaxy S8	360×740	1440×2960	5.8 inch	568
Galaxy S7	360×640	1440×2560	5.1 inch	576
Galaxy S7 Edge	360×640	1440×2560	5.5 inch	534
Galaxy J3	360×640	720×1280	5 inch	294
Galaxy J7	360×640	720×1280	5.5 inch	267
Galaxy S6	360×640	1440×2560	5.1 inch	576

Huawei

Model	Viewport	Resolution	Diagonal Screensize	DPI
Huawei P20 Lite	360×760	1080×2280	5.84 inch	432
Huawei P20 Pro	360×747	1080×2240	6.1 inch	408
Huawei P20	360×748	1080×2244	5.8 inch	429
Huawei P10	360×640	1080×1920	5.1 inch	432
Huawei P10 Lite	360×640	1080×1920	5.2 inch	424
Huawei P9	360×640	1080×1920	5.2 inch	424
Huawei P9 Lite	360×640	1080×1920	5.2 inch	424
Huawei P8 Lite	360×640	1080×1920	5.2 inch	424

Motorola

Model	Viewport	Resolution	Diagonal Screensize	DPI
Moto Z	360×640	1440×2560	5.5 inch	534
Moto E4	360×640	720×1280	5 inch	294
Moto Z2	360×640	1440×2560	5.5 inch	534
DROID Turbo	360×640	1440×2560	5.2 inch	565
Moto Z Play	360×640	1080×1920	5.5 inch	401
Moto Z2 Play	360×640	1080×1920	5.5 inch	401
Moto G5 Plus	360×640	1080×1920	5.2 inch	424

Xiaomi

Model	Viewport	Resolution	Diagonal Screensize	DPI
Redmi Note 5	393×786	1080×2160	6 inch	402
Redmi Note 4	360×640	1080×1920	5.5 inch	401
Redmi Note 3	360×640	1080×1920	5.5 inch	401
Redmi 4	360×640	720×1280	5 inch	294
Redmi 4X	360×640	720×1280	5 inch	294

Google

Model	Viewport	Resolution	Diagonal Screensize	DPI
Pixel 3 XL	393×786	1440×2880	6 inch	537
Pixel 3	393×786	1080×2160	5.5 inch	439
Pixel 2	412×640	1080×1920	5 inch	441
Pixel 2 XL	412×823	1440×2880	6 inch	537
Pixel	360×640	1080×1920	5 inch	441
Pixel XL	411×731	1440×2560	5.5 inch	534
Nexus 6	360×640	1440×2560	5.96 inch	493
Nexus 6P	412×738	1440×2560	5.7 inch	515
Nexus 5	360×640	1080×1920	4.95 inch	445

LG

Model	Viewport	Resolution	Diagonal Screensize	DPI
LG K20	360×640	720×1280	5.3 inch	277
LG Tribute HD	360×640	720×1280	5 inch	294
LG Aristo 2	360×640	720×1280	5 inch	294
LG Stylo 2	360×640	720×1280	5.7 inch	258
LG V20	360×640	1440×2560	5.7 inch	515
LG K10	360×640	720×1280	5.3 inch	277
LG K7	320×570	480×854	5 inch	196

ZTE

Model	Viewport	Resolution	Diagonal Screensize	DPI
ZTE ZMAX Pro	360×640	1080×1920	6 inch	160
ZTE Max XL	360×640	1080×1920	6 inch	367
ZTE Blade X	360×640	720×1280	5.5 inch	233
ZTE Majesty Pro	320×570	480×854	4.5 inch	218
ZTE Maven 3	320×570	480×854	5 inch	196

Others

Model	Viewport	Resolution	Diagonal Screensize	DPI
Lyf F90M (KaiOS)	240×320	240×320	2.4 inch	167
Oppo A37	360×640	720×1280	5 inch	294
Alcatel A30 Fierce	360×640	720×1280	5.5 inch	267
Vivo Y55s	360×640	720×1280	5 inch	294
Sony Xperia XA	360×640	720×1280	5 inch	294