Kích Thước & Độ Phân Giải Màn Hình Thiết Bị
Tài liệu tra cứu nhanh về các kích thước màn hình mà nhà thiết kế và lập trình viên thực sự nhắm tới: viewport CSS mà bố cục trang nhìn thấy, độ phân giải vật lý của tấm nền, tỷ lệ pixel thiết bị (DPR) liên kết hai đại lượng này, và tỷ lệ khung hình. Tìm theo tên hoặc lọc theo danh mục — thiết bị hiện tại của bạn được tự động phát hiện và tô sáng.
Đang phát hiện thiết bị của bạn…
Đang hiển thị 46 trong số 46 thiết bị
| Loại | Tỷ lệ | ||||
|---|---|---|---|---|---|
4K laptop (200% scaling) | Laptop | 1920×1080 | 3840×2160 | 2× | 16:9 |
4K UHD monitor (100%) | Desktop | 3840×2160 | 3840×2160 | 1× | 16:9 |
4K UHD monitor (150% scaling) | Desktop | 2560×1440 | 3840×2160 | 1.5× | 16:9 |
5K display / Studio Display | Desktop | 2560×1440 | 5120×2880 | 2× | 16:9 |
FHD laptop (1080p, 100%) | Laptop | 1920×1080 | 1920×1080 | 1× | 16:9 |
FHD laptop (1080p, 150% scaling) | Laptop | 1280×720 | 1920×1080 | 1.5× | 16:9 |
Full HD monitor (1080p) | Desktop | 1920×1080 | 1920×1080 | 1× | 16:9 |
Google Pixel 6a / 7a | Điện thoại | 412×915 | 1080×2400 | 2.6× | 20:9 |
Google Pixel 7 / 8 | Điện thoại | 412×915 | 1080×2400 | 2.625× | 20:9 |
Google Pixel 8 Pro | Điện thoại | 448×998 | 1344×2992 | 3× | 20:9 |
HD laptop (1366×768) | Laptop | 1366×768 | 1366×768 | 1× | 16:9 |
iMac 24" (4.5K) | Desktop | 2240×1260 | 4480×2520 | 2× | 16:9 |
iPad (10th gen) | Máy tính bảng | 820×1180 | 1640×2360 | 2× | ~3:2 |
iPad (9th gen) | Máy tính bảng | 810×1080 | 1620×2160 | 2× | 4:3 |
iPad Air 11" (M2) | Máy tính bảng | 820×1180 | 1640×2360 | 2× | ~3:2 |
iPad mini (6th gen) | Máy tính bảng | 744×1133 | 1488×2266 | 2× | ~3:2 |
iPad Pro 11" (M4) | Máy tính bảng | 834×1210 | 1668×2420 | 2× | ~3:2 |
iPad Pro 13" (M4) | Máy tính bảng | 1024×1366 | 2048×2732 | 2× | 4:3 |
iPhone 12 / 13 / 14 | Điện thoại | 390×844 | 1170×2532 | 3× | 19.5:9 |
iPhone 12 mini / 13 mini | Điện thoại | 375×812 | 1080×2340 | 3× | 19.5:9 |
iPhone 14 Plus / 15 Plus / Pro Max / 16 Plus | Điện thoại | 430×932 | 1290×2796 | 3× | 19.5:9 |
iPhone 14 Pro / 15 / 15 Pro / 16 | Điện thoại | 393×852 | 1179×2556 | 3× | 19.5:9 |
iPhone 16 Pro | Điện thoại | 402×874 | 1206×2622 | 3× | 19.5:9 |
iPhone 16 Pro Max | Điện thoại | 440×956 | 1320×2868 | 3× | 19.5:9 |
iPhone SE (2nd/3rd gen) | Điện thoại | 375×667 | 750×1334 | 2× | 16:9 |
iPhone XR / 11 | Điện thoại | 414×896 | 828×1792 | 2× | 19.5:9 |
MacBook Air / Pro 13" (M1/M2) | Laptop | 1440×900 | 2560×1600 | 2× | 16:10 |
MacBook Air 13" (M2/M3) | Laptop | 1470×956 | 2560×1664 | 2× | 16:10 |
MacBook Air 15" (M2/M3) | Laptop | 1710×1107 | 2880×1864 | 2× | 16:10 |
MacBook Pro 14" (M1–M4) | Laptop | 1512×982 | 3024×1964 | 2× | ~16:10 |
MacBook Pro 16" (M1–M4) | Laptop | 1728×1117 | 3456×2234 | 2× | ~16:10 |
QHD laptop (1440p) | Laptop | 2560×1440 | 2560×1440 | 1× | 16:9 |
QHD monitor (1440p) | Desktop | 2560×1440 | 2560×1440 | 1× | 16:9 |
Samsung Galaxy A54 / A34 | Điện thoại | 360×800 | 1080×2400 | 2.75× | 20:9 |
Samsung Galaxy S20 / S21 | Điện thoại | 360×800 | 1080×2400 | 3× | 20:9 |
Samsung Galaxy S22 / S23 / S24 | Điện thoại | 360×780 | 1080×2340 | 3× | 19.5:9 |
Samsung Galaxy S24 Ultra | Điện thoại | 384×832 | 1440×3120 | 3.75× | 19.5:9 |
Samsung Galaxy Tab A8 / A9 | Máy tính bảng | 800×1280 | 1200×1920 | 1.5× | 16:10 |
Samsung Galaxy Tab S8 / S9 | Máy tính bảng | 800×1280 | 1600×2560 | 2× | 16:10 |
Super ultrawide (5120×1440) | Desktop | 5120×1440 | 5120×1440 | 1× | 32:9 |
Surface Laptop 13.5" | Laptop | 1504×1002 | 2256×1504 | 1.5× | 3:2 |
Surface Pro 9 | Laptop | 1440×960 | 2880×1920 | 2× | 3:2 |
Ultrawide (2560×1080) | Desktop | 2560×1080 | 2560×1080 | 1× | 21:9 |
Ultrawide (3840×1600) | Desktop | 3840×1600 | 3840×1600 | 1× | 12:5 |
Ultrawide QHD (3440×1440) | Desktop | 3440×1440 | 3440×1440 | 1× | 21:9 |
WUXGA monitor (1200p) | Desktop | 1920×1200 | 1920×1200 | 1× | 16:10 |
Đang làm việc với màn hình của chính bạn? Mở Viewport Sizer · Kích thước màn hình của tôi là gì?
Độ phân giải logic và vật lý, cùng DPR
Mỗi màn hình hiện đại đều có hai độ phân giải. Độ phân giải vật lý là số lượng pixel thực sự có trên tấm nền — ví dụ 1179 × 2556 trên iPhone 15. Độ phân giải logic (CSS) là không gian tọa độ nhỏ hơn mà một trang web được dàn trang trong đó, chẳng hạn 393 × 852. Tỷ lệ pixel thiết bị (DPR) là cầu nối giữa hai con số này: đó là độ phân giải vật lý chia cho độ phân giải logic, vì vậy DPR bằng 3 nghĩa là điện thoại vẽ một khối 3 × 3 pixel thực cho mỗi pixel CSS. Các điện thoại và laptop mật độ cao “Retina” dùng DPR là 2 hoặc 3 để hiển thị chữ và hình ảnh sắc nét, trong khi một màn hình desktop thông thường có DPR là 1, tức một pixel CSS bằng đúng một pixel vật lý.
Vì sao nhà thiết kế làm việc theo kích thước viewport
Khi xây dựng một bố cục responsive, các media query và breakpoint trong CSS của bạn được đo bằng pixel CSS — viewport logic — chứ không phải pixel vật lý của tấm nền. Một chiếc điện thoại có chiều rộng vật lý 1080 pixel vẫn chỉ báo cáo viewport khoảng 360–414 pixel CSS, đó là lý do vì sao breakpoint 360px cho di động bao phủ được hầu hết điện thoại Android. Thiết kế theo viewport thay vì độ phân giải thô giúp chữ và vùng chạm giữ kích thước vật lý nhất quán trên các thiết bị có mật độ pixel rất khác nhau, nhờ đó cùng một bố cục vẫn trông hợp lý trên cả laptop mật độ thấp lẫn điện thoại flagship mật độ cao.
Cách đọc bảng này
- Viewport (px CSS) là kích thước logic mà một trang web nhìn thấy, được liệt kê theo hướng tự nhiên của thiết bị — dọc đối với điện thoại và máy tính bảng, ngang đối với laptop và màn hình.
- Độ phân giải vật lý là số pixel thực của tấm nền, con số được quảng cáo trên thông số kỹ thuật.
- DPR (tỷ lệ pixel thiết bị) nhân viewport lên thành độ phân giải vật lý; bất kỳ giá trị nào trên 1 đều cho thấy màn hình mật độ cao.
- Tỷ lệ khung hình là hình dạng của màn hình, từ tỷ lệ cao 19,5:9 của điện thoại hiện đại đến 16:9 của hầu hết màn hình máy tính, và 21:9, 32:9 của màn hình siêu rộng.
- Các hàng laptop và 4K phản ánh mức chia tỷ lệ hiển thị (display-scaling) mặc định phổ biến, vì vậy viewport có thể nhỏ hơn độ phân giải gốc của tấm nền.
Kích thước thay đổi theo từng thế hệ thiết bị
Hãy xem những con số này như một tài liệu tham khảo thực tiễn, không phải một sự đảm bảo tuyệt đối. Các nhà sản xuất chỉnh sửa kích thước màn hình gần như mỗi thế hệ — riêng iPhone đã có viewport rộng 375, 390, 393, 402, 414, 430 và 440 pixel CSS qua các đời máy gần đây — còn các thiết bị Android thì đa dạng hơn nhiều. Việc chia tỷ lệ hiển thị của hệ điều hành lại càng làm thay đổi viewport được báo cáo: một laptop Windows 1080p ở mức chia tỷ lệ 150% hoạt động như một màn hình 1280 × 720 với DPR là 1,5. Con số đáng tin cậy nhất luôn là con số mà chính trình duyệt của bạn báo cáo, đó là lý do thiết bị khớp ở trên được phát hiện trực tiếp từ màn hình của bạn.