Bạn đang thiết kế responsive web và muốn biết màn hình của mình đang có độ phân giải bao nhiêu, viewport thực tế là bao nhiêu pixel, tỷ lệ khung hình là gì? Hay bạn đang debug lỗi layout chỉ xuất hiện ở một kích thước màn hình cụ thể? Trang này hiển thị tất cả thông số màn hình và trình duyệt của bạn ngay lập tức — không cần vào Settings, không cần chạy lệnh.
Các thông số màn hình được hiển thị
| Thông số | Ý nghĩa | Ví dụ |
|---|---|---|
| Screen Resolution | Tổng số pixel vật lý của màn hình | 1920×1080, 2560×1440, 3840×2160 |
| Viewport Size | Vùng hiển thị của trình duyệt (không tính thanh công cụ) | 1280×720 (thay đổi khi zoom hoặc mở/đóng DevTools) |
| Device Pixel Ratio (DPR) | Tỷ lệ pixel vật lý / CSS pixel — >1 trên màn hình Retina/HiDPI | 1 (thường), 2 (Retina), 3 (smartphone cao cấp) |
| Aspect Ratio | Tỷ lệ chiều rộng/chiều cao | 16:9, 16:10, 21:9, 4:3 |
| Color Depth | Số bit màu mỗi pixel | 24-bit (16.7 triệu màu), 32-bit |
| Orientation | Dọc hay ngang | Portrait / Landscape |
Screen resolution vs Viewport — khác nhau như thế nào?
Đây là điểm gây nhầm lẫn phổ biến nhất khi làm responsive web:
| Screen Resolution | Viewport Size | |
|---|---|---|
| Là gì | Pixel vật lý của màn hình — cố định theo phần cứng | Không gian CSS có thể dùng trong tab trình duyệt — thay đổi liên tục |
| Ảnh hưởng bởi | Cài đặt Display trong OS | Kích thước cửa sổ browser, zoom level, thanh công cụ, DevTools |
| CSS dùng cái nào | Không trực tiếp | ✅ Media queries dùng viewport width/height |
| Ví dụ | MacBook 13": 2560×1600 (Retina) | Safari trên MacBook đó: có thể là 1280×800 CSS px |
Kết luận: Khi viết CSS media query @media (max-width: 768px), trình duyệt so sánh với viewport width — không phải screen resolution. Đây là lý do màn hình 4K vẫn trigger breakpoint mobile nếu cửa sổ browser thu nhỏ.
Device Pixel Ratio (DPR) là gì?
DPR (Device Pixel Ratio) cho biết một CSS pixel tương ứng với bao nhiêu pixel vật lý. Màn hình Retina của Apple có DPR = 2 — nghĩa là mỗi CSS pixel được render bằng 2×2 = 4 pixel vật lý, cho hình ảnh sắc nét hơn nhiều.
DPR ảnh hưởng đến:
- Ảnh trên web: Nếu DPR = 2, ảnh cần kích thước gấp đôi để không bị mờ trên màn hình Retina. Dùng
srcsethoặc CSSimage-set()để cung cấp ảnh phù hợp. - Canvas HTML5: Phải nhân kích thước canvas với DPR rồi scale ngược lại bằng CSS để canvas sắc nét trên HiDPI.
- SVG và icon font: Tự động scale theo DPR — đây là ưu điểm lớn của SVG so với ảnh PNG/JPG.
Các độ phân giải màn hình phổ biến
| Tên gọi | Độ phân giải | Tỷ lệ | Phổ biến ở |
|---|---|---|---|
| HD | 1280×720 | 16:9 | Laptop phổ thông, màn hình cũ |
| Full HD (FHD) | 1920×1080 | 16:9 | Phổ biến nhất hiện nay — laptop, monitor, TV |
| 2K / QHD | 2560×1440 | 16:9 | Gaming monitor, MacBook Pro |
| 4K / UHD | 3840×2160 | 16:9 | Monitor cao cấp, TV 4K |
| MacBook Retina 13" | 2560×1600 | 16:10 | Viewport CSS: 1280×800 |
| iPhone 15 Pro | 2556×1179 | ~19.5:9 | DPR = 3, viewport ~393×852 |
| Ultrawide | 3440×1440 | 21:9 | Monitor gaming, creative workstation |
Ứng dụng thực tế cho developer và designer
- Debug responsive: Biết chính xác viewport của bạn để tái hiện lỗi layout — thay vì đoán mò breakpoint nào đang active.
- Thiết kế ảnh cho Retina: Kiểm tra DPR của màn hình đang dùng để biết cần chuẩn bị ảnh @1x, @2x hay @3x.
- Test trên nhiều viewport: Dùng DevTools (Ctrl+Shift+M) để mô phỏng các kích thước màn hình khác nhau mà không cần thiết bị thật.
- Báo cáo lỗi chính xác: Khi report bug UI, kèm thông số viewport và DPR giúp developer tái hiện lỗi nhanh hơn nhiều.
Kết luận
Hiểu rõ màn hình của mình đang chạy thông số gì là bước đầu tiên để làm responsive web đúng chuẩn. Bookmark trang này để kiểm tra nhanh khi cần — đặc biệt hữu ích khi bạn debug trên thiết bị lạ hoặc cần báo cáo thông số màn hình chính xác.
Khám phá thêm tại codetuthub.com/tools.
0 Bình luận