Các Thông Số Kỹ Thuật Của Màn Hình điện Thoại Trong Thiết Kế Giao ...

Đại Phố Web Development > Blog > Lập trình > 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 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

Dịch vụ web

• Thiết kế web trọn gói
• Wordpress theme
• Wordpress Plugin
• Tối ưu hóa SEO
• Ứng dụng web-based/app trên nền web
• Phạm vi hoạt động: Tiền Giang, Long An, TP.HCM, Bình Dương, Đồng Nai
• Hotline: 03 6694 1906
• Email: kythuat@daipho.com

Kết nối

Share on Facebook Share Share on TwitterTweet Share on Pinterest Share Share on LinkedIn Share Share on Digg Share

Đại Phố Network Media

Từ khóa

Biểu thức chính quy Blogspot CSS HTML Javascript Joomla JQuery Laravel MyBB PHP PHP Regular Expressions Quản trị hệ thống SEO Smarty Wordpress

Mẫu web mới

DP Care Service: Mẫu trang web dịch vụ

DP Care Service là mẫu giao điện trang web dành riêng cho các loại hình dịch vụ, thích hợp cho cả nhà xưởng phụ trợ công nghiệp và dịch vụ dân dụng như: chăm sóc xe, dịch vụ gia công cho các nhà xưởng, dịch vụ y tế chăm sóc sức khỏe, dịch vụ cho thuê, dịch vụ vận tải, các loại hình gia công… [ + ]

DP Vegan Restaurant: giao diện nhà hàng thuần chay

DP Vegan Restaurant là giao diện trang web, template mẫu dành cho các nhà hàng chay, cơ sở chế biến thực phẩm chay hoặc các cửa hiệu thực phẩm thuần chay. Phù hợp cả 2 loại hình trang web bán hàng và trang web dịch vụ.… [ + ]

Organic Farm: mẫu trang web nông sản hữu cơ xanh/nhà vườn

Organic Farm là trang web thương mại đện tử dành cho công ty, cơ sở sản xuất, phân phối: nông trại trồng rau hữu cơ, siêu thị, nông sản, thực phẩm xanh, trái cây, thực phẩm healthy, thảo mộc dược liệu, cửa hàng trà thảo dược hữu cơ, vườn bếp… [ + ]

Thủ thuật

Các phương thức của đối tượng Woocommerce Product

Bạn đang muốn tìm hiểu về các phương thức và hàm của đối tượng $product trong… [ + ]

WordPress: tạo dải số phân trang cho danh mục/taxonomy

Khi viết code cho Wordpress theme, bạn muốn tạo phân trang cho danh mục là các… [ + ]

Xử lý Vấn đề INP: Chẩn đoán và gỡ lỗi

Ở trang 2 của bài viết: Xử lý Vấn đề INP của các URL trong Google Search… [ + ]