Kiểm tra độ phân giải màn hình và test responsive design
Screen Resolution
0 x 0
Viewport Size
0 x 0
Device Pixel Ratio
1x
Actual Pixels
0 x 0
| Breakpoint | Min Width | Tailwind CSS | Bootstrap |
|---|---|---|---|
| Mobile | 0px | default | xs |
| Small | 640px | sm: | sm |
| Medium | 768px | md: | md |
| Large | 1024px | lg: | lg |
| Extra Large | 1280px | xl: | xl |
| 2XL | 1536px | 2xl: | xxl |
Công cụ kiểm tra độ phân giải màn hình online miễn phí của Tấn Phát Digital. Hiển thị screen resolution, viewport size, device pixel ratio của thiết bị hiện tại. Test responsive design với 8+ presets phổ biến: iPhone SE, iPhone 14 Pro, iPad Mini, iPad Pro, MacBook Air, Desktop HD/2K/4K. Mở URL trong cửa sổ mới với kích thước tùy chọn. Bảng tham khảo breakpoints của Tailwind CSS và Bootstrap. Copy thông tin màn hình với một click. Hữu ích cho web developers, UI/UX designers khi test responsive design.
Responsive design là yêu cầu bắt buộc cho mọi website hiện đại. Theo StatCounter, mobile traffic chiếm hơn 55% global web traffic. Google sử dụng mobile-first indexing, nghĩa là version mobile của website được dùng để ranking. Website không responsive sẽ: Mất traffic từ mobile users. Bị Google đánh giá thấp trong rankings. Có bounce rate cao do UX kém. Mất potential customers và revenue. Tool này giúp developers và designers: Kiểm tra nhanh thông tin màn hình hiện tại. Test website trên nhiều kích thước khác nhau. Debug CSS breakpoints. Đảm bảo website hiển thị tốt trên mọi thiết bị.
Screen Resolution: Số pixels vật lý của màn hình (ví dụ: 1920x1080). Đây là hardware specification, không thay đổi. Viewport Size: Kích thước vùng hiển thị content trong browser, không bao gồm browser UI (address bar, tabs). Thay đổi khi resize window. Device Pixel Ratio (DPR): Tỷ lệ giữa physical pixels và CSS pixels. DPR = 1: Standard displays (1 CSS pixel = 1 physical pixel). DPR = 2: Retina displays (1 CSS pixel = 4 physical pixels). DPR = 3: Super Retina (iPhone Pro). Actual Pixels = Screen Resolution × DPR. Ví dụ: iPhone 14 Pro có screen 393x852 CSS pixels, DPR = 3, actual = 1179x2556 physical pixels.
Mobile-first approach: Viết CSS cho mobile trước, dùng min-width media queries để add styles cho larger screens. Tailwind CSS breakpoints: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Bootstrap breakpoints: sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px). Tips: Không cần test mọi kích thước, focus vào breakpoints. Test ở boundary (ví dụ: 767px và 768px). Luôn test trên real devices nếu có thể. Dùng Chrome DevTools Device Mode cho testing chi tiết hơn.
DPR là tỷ lệ giữa physical pixels và CSS pixels. Màn hình thường có DPR = 1 (1 CSS pixel = 1 physical pixel). Màn hình Retina (Apple) có DPR = 2 (1 CSS pixel = 4 physical pixels, 2x2). iPhone Pro có DPR = 3. DPR cao = hình ảnh sắc nét hơn, nhưng cần serve images với resolution cao hơn (2x, 3x).
Screen Resolution là kích thước màn hình vật lý. Viewport là vùng hiển thị content trong browser, không bao gồm: Browser UI (address bar, tabs, bookmarks bar). OS UI (taskbar, dock). Scrollbars (trên một số OS). Viewport thay đổi khi resize window, Screen Resolution không đổi.
Khá chính xác cho quick testing, nhưng có limitations: Browser chrome (title bar, etc.) chiếm một phần. Không simulate touch events. Không simulate device-specific behaviors. Để test chính xác hơn, dùng Chrome DevTools Device Mode hoặc real devices.
Tùy thuộc vào audience của bạn. Thông thường: 768px (tablet portrait) - phân biệt mobile và tablet. 1024px (tablet landscape / small laptop) - phân biệt tablet và desktop. Kiểm tra Google Analytics để biết devices phổ biến của users.
Website responsive tốt khi: Content readable ở mọi kích thước (không cần zoom). Navigation accessible (hamburger menu trên mobile). Images scale properly (không bị stretch hoặc overflow). Touch targets đủ lớn (44x44px minimum). Không có horizontal scroll. Forms usable trên mobile.
CÓ, nếu có thể. Emulators và resize windows không capture: Touch interactions (tap, swipe, pinch). Device-specific browsers (Safari iOS khác Chrome). Performance trên actual hardware. Keyboard behavior trên mobile. Ít nhất test trên 1 iOS device và 1 Android device.
Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.
