Công Cụ Kiểm Tra Kích Thước Viewport & Breakpoint Responsive
Xem trình duyệt của bạn thực sự lớn đến mức nào đối với một trang web. Công cụ này đọc chiều rộng và chiều cao viewport của bạn tính bằng pixel CSS, tỷ lệ pixel thiết bị và hướng màn hình, đồng thời hiển thị breakpoint responsive mà kích thước hiện tại rơi vào — tất cả đều trực tiếp. Hãy thay đổi kích thước cửa sổ và mọi giá trị sẽ cập nhật ngay lập tức.
Thay đổi kích thước cửa sổ trình duyệt của bạn và xem các giá trị này cập nhật trực tiếp.
Breakpoint của Tailwind CSS
Khoảng mà viewport của bạn rơi vào sẽ được làm nổi bật khi bạn thay đổi kích thước.
| Tiền tố | Chiều rộng tối thiểu | Áp dụng từ |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Danh mục thiết bị
Bảng thử nghiệm có thể thay đổi kích thước
Kéo góc dưới bên phải để thay đổi kích thước bảng này. Nó báo cáo kích thước của chính nó và breakpoint nào mà chiều rộng đó sẽ chạm tới — một thước đo responsive nhanh chóng.
Kích thước viewport phổ biến của thiết bị
Viewport pixel CSS ở chế độ dọc gần đúng để tham khảo — giá trị thực tế thay đổi theo trình duyệt và hệ điều hành.
| Thiết bị | Viewport (CSS px) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Công cụ liên quan
Viewport là gì
Viewport là vùng hiển thị mà một trang web có thể vẽ vào — vùng nội dung của cửa sổ trình duyệt, không tính các tab, thanh địa chỉ hay thanh dấu trang. Đó là lý do viewport hầu như luôn nhỏ hơn độ phân giải màn hình của bạn: màn hình là toàn bộ tấm nền, trong khi viewport chỉ là phần mà trang web có thể sử dụng. window.innerWidth và window.innerHeight báo cáo vùng đó tính bằng pixel CSS, còn documentElement.clientWidth/clientHeight báo cáo layout viewport (cùng vùng đó trừ đi chiều rộng của thanh cuộn cổ điển, khi có thanh cuộn). Vì viewport thay đổi ngay khi bạn thay đổi kích thước, chia đôi màn hình hoặc xoay thiết bị, đây chính là con số mà các bố cục responsive thực sự phản hồi theo.
Pixel CSS so với pixel thiết bị và devicePixelRatio
Pixel CSS là một đơn vị bố cục, không phải một chấm vật lý trên tấm nền. Trên màn hình tiêu chuẩn, một pixel CSS tương ứng với một pixel vật lý, nhưng các màn hình mật độ cao 'Retina' dồn hai hoặc ba pixel vật lý vào mỗi pixel CSS để chữ trông sắc nét hơn. window.devicePixelRatio cho bạn biết hệ số nhân đó: giá trị 2 nghĩa là một viewport rộng 1440 pixel CSS được vẽ bằng 2880 pixel vật lý. Các trang web được bố trí theo pixel CSS, vì vậy một điện thoại báo cáo viewport rộng 390 pixel với DPR là 3 có tấm nền vật lý rộng khoảng 1170 pixel. Để xem độ phân giải vật lý đầy đủ và mật độ pixel của màn hình, hãy sử dụng công cụ Kích Thước Màn Hình Của Tôi Là Gì và Kiểm Tra Độ Phân Giải Màn Hình.
Breakpoint responsive
Breakpoint là chiều rộng viewport tại đó bố cục thay đổi — các cột xếp chồng lên nhau, một menu thu gọn lại, cỡ chữ thay đổi. Các truy vấn media CSS và các framework tiện ích như Tailwind CSS định nghĩa một tập hợp nhỏ các chiều rộng có tên và áp dụng kiểu dáng từ chiều rộng đó trở lên. Các giá trị mặc định của Tailwind là sm ở 640px, md ở 768px, lg ở 1024px, xl ở 1280px và 2xl ở 1536px; dưới 640px bạn đang ở trong khoảng base không có tiền tố. Bảng tham chiếu bên dưới làm nổi bật khoảng đang hoạt động khi bạn thay đổi kích thước, và bảng thử nghiệm có thể kéo thả sẽ báo cáo breakpoint nào mà chiều rộng của chính nó sẽ chạm tới — một cách nhanh chóng để xem trước cách một thành phần hoạt động ở các kích thước khác nhau mà không cần thay đổi toàn bộ cửa sổ của bạn.
Vì sao innerWidth khác với chiều rộng màn hình
Có nhiều yếu tố nằm giữa độ phân giải tấm nền của bạn và viewport mà một trang nhìn thấy. Giao diện trình duyệt (các tab, thanh công cụ và thanh cuộn hiển thị) làm giảm vùng có thể sử dụng. Thu phóng trang cũng thay đổi điều đó: phóng to làm giảm số lượng pixel CSS vừa với màn hình, vì vậy innerWidth giảm xuống mặc dù cửa sổ không di chuyển, và nó cũng tác động đến devicePixelRatio. Trên thiết bị di động, thẻ meta viewport — <meta name="viewport" content="width=device-width, initial-scale=1"> — yêu cầu trình duyệt đặt layout viewport bằng chiều rộng của thiết bị thay vì giả vờ là một máy tính để bàn rộng ~980px, đó là lý do các trang web responsive cần đến nó. Việc chia tỷ lệ hiển thị của hệ điều hành cũng thay đổi số lượng pixel CSS, đó là lý do hai màn hình giống hệt nhau có thể báo cáo kích thước viewport khác nhau.