Cách dùng Kiểm tra độ phân giải màn hình
- Mở trang, các giá trị sẽ hiển thị ngay lập tức.
- Đổi kích thước cửa sổ hoặc xoay điện thoại để xem viewport thay đổi.
- Sao chép thông tin để đính kèm vào báo cáo lỗi.
Độ phân giải màn hình và viewport khác nhau thế nào
- Độ phân giải màn hình là kích thước toàn bộ màn hình tính bằng CSS pixel (
screen.width × screen.height). - Viewport là vùng cửa sổ trình duyệt dành cho trang web (
innerWidth × innerHeight); đây là giá trị mà media query CSS sử dụng. - Tỷ lệ pixel thiết bị (DPR) là số pixel vật lý trên mỗi CSS pixel. Một chiếc điện thoại có DPR 3 và viewport rộng 390 pixel thực tế có 1170 pixel vật lý theo chiều ngang.
Các kích thước màn hình phổ biến
| Loại thiết bị | Viewport CSS | DPR |
|---|---|---|
| iPhone đời mới | 390–430 × 844–932 | 3 |
| Điện thoại Android | 360–412 × 780–915 | 2.6–3.5 |
| iPad | 768–1032 × 1024–1376 | 2 |
| Laptop | 1280–1536 × 720–960 | 1–2 |
| Màn hình Full HD | 1920 × 1080 | 1 |
| Màn hình 4K (có thu phóng) | 1920–2560 × 1080–1440 | 1.5–2 |
Vì sao các con số trông “sai”?
Hệ điều hành thu phóng màn hình: màn hình 4K ở mức scale 150 % sẽ báo 2560 × 1440 CSS pixel với DPR 1.5. Zoom trình duyệt cũng làm thay đổi DPR: phóng to lên 200 % thì viewport giảm còn một nửa. Đây là hành vi bình thường, không phải lỗi.
Dành cho lập trình viên
Thiết kế dựa trên CSS pixel và kiểm tra các độ rộng viewport phổ biến (360, 390, 768, 1024, 1280, 1536). Phục vụ ảnh sắc nét cho màn hình DPR cao bằng srcset và thay đổi kích thước ảnh với công cụ đổi kích thước ảnh. Chữ co giãn linh hoạt với công cụ tính clamp() giúp bạn không cần breakpoint cho cỡ chữ.
Cũng được tìm dưới tên: độ phân giải màn hình, kích thước màn hình, kích thước viewport, màn hình của tôi độ phân giải bao nhiêu, device pixel ratio là gì, kích thước cửa sổ trình duyệt.
Các công cụ dùng kèm tốt với Kiểm tra độ phân giải màn hình
- IP Của Tôi Là Gì — Địa chỉ IP công khai của bạn và mọi thông tin trình duyệt tiết lộ cho các website bạn truy cập: user agent, màn hình, ngôn ngữ, múi giờ và request header.
- Phân tích User Agent — Giải mã mọi chuỗi User-Agent thành trình duyệt, engine, hệ điều hành và thiết bị, đồng thời kiểm tra xem nó thuộc về công cụ tìm kiếm, AI crawler hay một script hay không.
- Máy tính tỷ lệ khung hình — Thay đổi kích thước ảnh và video mà không bị méo: nhập tỷ lệ và một cạnh để tìm cạnh còn lại, hoặc nhập kích thước để tìm tỷ lệ, kèm mã CSS sẵn để dán.
- Chuyển đổi PX sang REM — Chuyển đổi qua lại giữa pixel, rem và em với kích thước font gốc của riêng bạn, hoặc dán cả một stylesheet và chuyển đổi mọi giá trị px chỉ trong một lần.
Câu hỏi thường gặp
Vì sao màn hình 4K của tôi hiển thị độ phân giải nhỏ hơn?
Do thu phóng hiển thị: Windows và macOS phóng to mọi thứ, nên trình duyệt báo kích thước đã thu phóng tính bằng CSS pixel. Nhân với tỷ lệ pixel thiết bị để ra độ phân giải vật lý.
Kích thước màn hình và viewport khác nhau ở điểm nào?
Viewport không tính thanh công cụ, thẻ tab và viền cửa sổ của trình duyệt. Đó là phần không gian thực sự dành cho trang web.
Thông tin này có được gửi đi đâu không?
Không. Trình duyệt của bạn tự đọc thông tin và chỉ hiển thị trên trang này.
Tôi có thể cài Kiểm tra độ phân giải màn hình như một ứng dụng web và dùng khi không có mạng không?
Có. Kiểm tra độ phân giải màn hình là một ứng dụng web (PWA) có thể cài đặt — cài trực tiếp từ trình duyệt, không cần tải từ cửa hàng ứng dụng. Trên Chrome hoặc Edge (Windows, macOS, Linux, ChromeOS) hoặc Android, bấm Cài đặt ứng dụng ở đầu trang này; trên iPhone và iPad, dùng Chia sẻ → Thêm vào Màn hình chính; trên Mac, dùng File → Add to Dock trong Safari 17 trở lên. Sau đó ứng dụng mở trong cửa sổ riêng với biểu tượng riêng, và vì chạy hoàn toàn trên trình duyệt nên vẫn hoạt động khi không có mạng. Firefox trên máy tính không thể cài ứng dụng web. Cách cài đặt hoạt động thế nào.