Phát hiện độ phân giải màn hình và viewport, hỗ trợ kiểm tra breakpoint đáp ứng và cập nhật thời gian thực khi thay đổi kích thước
Công cụ tiện ích
Về công cụ này
Công cụ phát hiện độ phân giải màn hình hiển thị ngay lập tức độ phân giải màn hình, kích thước viewport, tỷ lệ pixel thiết bị, vùng màn hình khả dụng, hướng và breakpoint đáp ứng — tất cả thông tin cập nhật thời gian thực khi bạn thay đổi kích thước cửa sổ trình duyệt.
Tính năng chính
- Phát hiện ngay lập tức độ phân giải màn hình và kích thước viewport
- Hiển thị tỷ lệ pixel thiết bị và vùng màn hình khả dụng
- Hiển thị hướng hiện tại (ngang hoặc dọc)
- Chỉ báo breakpoint đáp ứng (XS, SM, MD, LG, XL, XXL)
- Cập nhật thời gian thực khi thay đổi kích thước cửa sổ trình duyệt
- Không cần cài đặt, hoàn toàn chạy trong trình duyệt
Tình huống sử dụng
- Kiểm tra độ phân giải màn hình và kích thước viewport cho phát triển web
- Xác minh breakpoint đáp ứng hiện tại của bố cục
- Kiểm tra hiệu ứng đáp ứng của website ở các kích thước cửa sổ khác nhau
- Xác định tỷ lệ pixel thiết bị cho kiểm tra màn hình DPI cao
- Kiểm tra nhanh hướng màn hình trong công việc thiết kế đáp ứng
screen
resolution
viewport
Câu hỏi thường gặp
Công cụ phát hiện độ phân giải màn hình hiển thị những thông tin nào?
Công cụ hiển thị độ phân giải màn hình, kích thước viewport, tỷ lệ pixel thiết bị, vùng màn hình khả dụng, hướng hiện tại (ngang hoặc dọc) và breakpoint đáp ứng mà viewport thuộc về.
Sự khác biệt giữa độ phân giải màn hình và kích thước viewport là gì?
Độ phân giải màn hình là kích thước pixel vật lý của màn hình (như 1920x1080). Kích thước viewport là vùng cửa sổ trình duyệt hiển thị, thường nhỏ hơn toàn màn hình do giao diện trình duyệt, thanh tác vụ và cài đặt thu phóng.
Tỷ lệ pixel thiết bị là gì?
Tỷ lệ pixel thiết bị (DPR) là tỷ lệ giữa pixel màn hình vật lý và pixel CSS. DPR bằng 2 có nghĩa là mỗi pixel CSS sử dụng 2x2 pixel vật lý, phổ biến trên màn hình Retina và DPI cao. Điều này ảnh hưởng đến kết xuất hình ảnh và thiết kế đáp ứng.
Làm thế nào để kiểm tra breakpoint đáp ứng?
Công cụ hiển thị thời gian thực chiều rộng và chiều cao viewport hiện tại. Thay đổi kích thước cửa sổ trình duyệt để thấy kích thước thay đổi. Điều này giúp xác định breakpoint CSS nào đang hoạt động ở các kích thước cửa sổ khác nhau.
Có thể phát hiện hướng màn hình không?
Có. Công cụ hiển thị màn hình đang ở chế độ dọc hay ngang, đặc biệt hữu ích khi kiểm tra bố cục đáp ứng trên thiết bị di động hoặc màn hình xoay.