Công Cụ Kiểm Tra Kích Thước Viewport & Breakpoint Responsive
Xem cửa sổ trình duyệt của bạn thực sự lớn như thế nào đối với một trang web. Công cụ này đọc kích thước viewport của bạn theo pixel CSS, tỷ lệ pixel thiết bị và hướng màn hình, cùng breakpoint đáp ứng mà bạn hiện đang ở — cập nhật trực tiếp khi bạn thay đổi kích thướ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× |
Viewport là khu vực mà một trang web phải vẽ vào - cửa sổ trình duyệt của bạn trừ các tab, thanh địa chỉ và thanh cuộn. Đó là lý do tại sao nó 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à lát cắt mà trang có thể sử dụng. Nó được đo bằng pixel CSS, đơn vị bố cục thay vì chấm vật lý - màn hình 'Retina' mật độ cao đóng gói hai hoặc ba pixel vật lý vào mỗi pixel CSS để văn bản trông sắc nét hơn và window.devicePixelRatio báo cáo hệ số nhân đó.
Công cụ này đọc window.innerWidth và window.innerHeight trên mỗi thay đổi về kích thước và hướng, cùng với viewport bố cục từ documentElement.clientWidth/clientHeight, tỷ lệ pixel thiết bị và hướng màn hình. Breakpoint là chiều rộng viewport mà tại đó bố cục thay đổi — cột xếp chồng, menu thu gọn, cỡ chữ thay đổi — và các framework như Tailwind CSS áp dụng kiểu dáng từ một tập hợp các chiều rộng được đặt tên trở lên. Tài liệu tham khảo bên dưới làm nổi bật phạm vi mà chiều rộng của bạn rơi vào, và bảng kiểm tra có thể kéo báo cáo breakpoint mà chiều rộng của chính nó sẽ chạm tới, vì vậy bạn có thể xem trước một thành phần mà không cần thay đổi kích thước toàn bộ cửa sổ của mình. Mọi thứ đều chạy cục bộ; không có gì được tải lên.
Nếu các con số có vẻ không đúng, một số yếu tố nằm giữa độ phân giải của tấm nền và viewport mà một trang nhìn thấy. Giao diện trình duyệt (chrome) và thanh cuộn trừ đi khu vực có thể sử dụng và thu phóng trang thu nhỏ số điểm ảnh CSS - vì vậy innerWidth giảm mà cửa sổ không di chuyển - cũng như tỷ lệ hiển thị hệ điều hành, đó là lý do tại sao hai màn hình giống hệt nhau có thể báo cáo kích thước khác nhau. Trên điện thoại, thẻ meta viewport, <meta name="viewport" content="width=device-width, initial-scale=1">, đặt trang ở chiều rộng thiết bị thay vì giả lập một desktop ~980px, vì vậy viewport 390 px ở DPR 3 nằm trên một tấm nền khoảng 1170 pixel vật lý. Để xem độ phân giải vật lý và mật độ điểm ảnh đầy đủ của màn hình, hãy sử dụng các công cụ What Is My Screen Size và Screen Resolution Test.
Breakpoint đáp ứng phổ biến
| Breakpoint | Chiều rộng tối thiểu | Các thiết bị điển hình trong phạm vi đó |
|---|---|---|
| base | 0px | Điện thoại ở chế độ dọc (rộng ~360–430 CSS px) |
| sm | 640px | Điện thoại lớn ngang, máy tính bảng nhỏ |
| md | 768px | Máy tính bảng ở chế độ dọc (iPad báo cáo 768 px) |
| lg | 1024px | Máy tính bảng ngang, máy tính xách tay nhỏ |
| xl | 1280px | Máy tính xách tay và cửa sổ máy tính để bàn tiêu chuẩn |
| 2xl | 1536px | Màn hình máy tính để bàn lớn và độ phân giải cao |