Cách sử dụng

Mở trang. Trình duyệt sẽ đọc các giá trị ngay lập tức.
Thay đổi kích thước cửa sổ hoặc xoay thiết bị để xem kích thước và hướng khung nhìn cập nhật.
Dùng “Sao chép tất cả” để dán thông tin vào báo cáo lỗi hoặc yêu cầu hỗ trợ.

Cách hoạt động

Trình duyệt báo kích thước bằng điểm ảnh CSS, đơn vị các trang web dùng để bố cục. Trên màn hình có mật độ điểm ảnh cao, mỗi điểm ảnh CSS được hiển thị bằng nhiều điểm ảnh vật lý; tỷ lệ điểm ảnh thiết bị (DPR) cho biết số lượng đó. Điện thoại báo kích thước 390 × 844 với DPR là 3 có màn hình khoảng 1170 × 2532 điểm ảnh thiết bị. Trên máy tính, cả mức thu phóng của trình duyệt lẫn tỷ lệ hiển thị của hệ điều hành đều làm thay đổi DPR và kích thước CSS. Vì vậy, màn hình 2560 × 1440 ở tỷ lệ 125 % sẽ báo kích thước 2048 × 1152.

Độ phân giải màn hình là kích thước toàn bộ màn hình; vùng hiển thị khả dụng không bao gồm các thanh cố định của hệ điều hành như thanh tác vụ Windows hoặc thanh menu macOS; khung nhìn là phần cửa sổ trình duyệt hiển thị trang, không gồm thanh công cụ nhưng có thể bao gồm thanh cuộn. CSS dùng khung nhìn để áp dụng các truy vấn phương tiện như min-width: 768px, vì vậy đây là kích thước cần kiểm tra khi thử nghiệm bố cục đáp ứng.

Chế độ màu và tùy chọn giảm chuyển động lấy từ các tính năng CSS media mà trang web dùng để thích ứng với cài đặt hệ thống. Thông tin về nhãn hiệu, nền tảng và thiết bị di động lấy từ User-Agent Client Hints, chỉ có trên các trình duyệt dựa trên Chromium. Một số trình duyệt cố ý làm tròn hoặc cố định các giá trị này để giảm khả năng nhận dạng dấu vân tay, nên chúng có thể không khớp chính xác với phần cứng của bạn.

Ví dụ

Kiểm tra bố cục đáp ứng

Bố cục gặp lỗi trên máy tính xách tay của đồng nghiệp. Họ sao chép thông tin, cho thấy khung nhìn 1280 × 649 ở DPR 1.5. Hãy đặt thanh công cụ thiết bị của trình duyệt về cùng kích thước khung nhìn để tái hiện sự cố.

Chọn kích thước ảnh

Ảnh sản phẩm được hiển thị với chiều rộng 400 điểm ảnh CSS. Trên điện thoại có DPR 3, ảnh cần 1200 điểm ảnh để sắc nét; thông tin này giúp bạn chọn các kích thước cần đưa vào srcset.

Kiểm tra tỷ lệ hiển thị của màn hình

Màn hình 3840 × 2160 báo kích thước 2560 × 1440 với DPR 1.5: Windows đang thu phóng màn hình lên 150 %.

Câu hỏi thường gặp

Tại sao độ phân giải màn hình khác với thông số của màn hình?

Trình duyệt báo kích thước bằng điểm ảnh CSS, được tính bằng cách chia số điểm ảnh vật lý cho hệ số tỷ lệ. Nhân giá trị này với tỷ lệ điểm ảnh thiết bị để ước tính độ phân giải phần cứng. Mức thu phóng của trình duyệt cũng làm thay đổi giá trị được báo.

Kích thước màn hình và kích thước khung nhìn khác nhau thế nào?

Kích thước màn hình là toàn bộ màn hình. Khung nhìn chỉ là vùng bên trong cửa sổ trình duyệt nơi trang được hiển thị, nên nhỏ hơn và thay đổi khi bạn đổi kích thước cửa sổ hoặc mở công cụ dành cho nhà phát triển.

Thông tin này có được dùng để theo dõi tôi không?

Trang này không dùng thông tin đó để theo dõi bạn: các giá trị chỉ được hiển thị cho bạn, không được lưu hoặc gửi đi đâu. Trang web có thể đọc cùng các giá trị này; vì vậy một số trình duyệt làm tròn chúng để gây khó khăn hơn cho việc nhận dạng dấu vân tay.

Tại sao máy tính xách tay của tôi lại hiển thị hỗ trợ cảm ứng?

Khả năng hỗ trợ cảm ứng dựa trên số điểm chạm mà trình duyệt báo. Máy tính xách tay có màn hình cảm ứng vẫn báo số điểm chạm ngay cả khi bạn chủ yếu dùng chuột; một số trình điều khiển hoặc cấu hình máy tính từ xa cũng báo hỗ trợ cảm ứng dù không có màn hình cảm ứng.

Quyền riêng tư

JavaScript trong trình duyệt đọc tất cả giá trị và chỉ hiển thị cho bạn. Không có dữ liệu nào được lưu, tải lên hoặc đưa vào số liệu phân tích; chỉ ghi nhận một sự kiện ẩn danh cho biết công cụ đã được mở và sử dụng.