Init Responsive Lab là công cụ xem trước website trên hàng loạt kích thước màn hình hiện đại, chạy hoàn toàn trên trình duyệt — không cần cài đặt, không cần server. Sử dụng kiến trúc render tăng dần (incremental keyed rendering) để mỗi khung iframe chỉ được tạo DOM đúng một lần; thêm, xoá, xoay, resize không bao giờ huỷ iframe của các khung khác. Mọi thao tác từ zoom canvas, pan kéo-thả, kéo cạnh khung để đổi kích thước, đến lưu bộ khung thiết bị đều diễn ra 100% trong trình duyệt của bạn. Không dữ liệu nào rời khỏi thiết bị, không ai có thể xem hoặc lưu trữ URL bạn đang kiểm tra.
Giới thiệu
Với Init Responsive Lab, bạn có thể xem trước website của mình trên mọi kích thước màn hình hiện đại chỉ trong vài giây ngay trên trình duyệt. Công cụ hỗ trợ đầy đủ preset thiết bị hiện đại — từ iPhone SE, iPhone 16 Pro Max, Galaxy S24, Galaxy Z Fold gập/mở, iPad, laptop phổ thông đến Desktop Full HD, 2K, Ultrawide 21:9, Super Ultrawide 32:9, 4K UHD và 5K iMac-class — cùng khả năng tùy chỉnh kích thước tự do từ 100px đến 7680×4320. Tích hợp breakpoint badge hiển thị nhãn XS/SM/MD/LG/XL/2XL theo chuẩn Tailwind CSS ngay trên từng khung, giúp bạn kiểm tra responsive nhanh chóng. Sau khi sắp xếp, bạn có thể lưu bộ khung thiết bị (Workspace) để mở lại sau hoặc xuất/nhập JSON để chia sẻ với team.
Bạn chỉ cần:
- Nhập URL website cần kiểm tra — hỗ trợ cả localhost, staging, HTTPS và tự động thêm protocol nếu thiếu
- Chọn đúng thiết bị từ danh mục bên trái — Mobile, Foldable, Tablet, Laptop, Desktop, Ultrawide, 4K/5K — hoặc thêm kích thước tuỳ chỉnh
- Tùy chọn Xoay ngang/dọc từng khung để kiểm tra responsive ở cả hai hướng
- Kéo cạnh khung để đổi kích thước trực tiếp — chiều rộng, chiều cao hoặc cả hai cùng lúc, kích thước live hiển thị khi kéo
- Zoom toàn canvas bằng Ctrl + lăn chuột, hoặc dùng nút thu nhỏ/phóng to/vừa khung trên toolbar
- Pan kéo-thả canvas — giữ Space + kéo chuột trái, hoặc giữ chuột giữa, để di chuyển vùng nhìn trên canvas lớn
- Kéo-thả sắp xếp khung — giữ bezel trên cùng của khung và kéo để đổi thứ tự, iframe không bị reload
- Tạm dừng/Tải lại từng khung riêng lẻ — tiết kiệm hiệu năng khi làm việc với nhiều khung lớn
- Nhấn "Lưu bộ hiện tại" để lưu Workspace, hoặc "Xuất JSON" để chia sẻ cấu hình với team
- Hoặc nhấn "Tải lại tất cả" để refresh toàn bộ iframe cùng lúc
Mọi thao tác diễn ra hoàn toàn trên thiết bị của bạn. Không có dữ liệu nào được gửi đi, không lưu trữ trên cloud, không giới hạn số lượng khung. Bạn có thể xem trước 1 website trên 3 thiết bị hoặc 30 thiết bị cùng lúc, chỉ giới hạn bởi bộ nhớ của trình duyệt.
Ứng dụng thực tế
- Kiểm tra responsive design: Xem website trên iPhone, iPad, laptop, desktop, ultrawide, 4K cùng lúc — phát hiện lỗi layout, breakpoint, overflow ngay lập tức
- Test trên thiết bị thật không có sẵn: Không cần sở hữu Galaxy Z Fold, iPad Pro 12.9", màn ultrawide 32:9 hay màn 5K — vẫn kiểm tra được chính xác
- Phát triển localhost: Nhập http://localhost:3000 hoặc http://127.0.0.1 để xem trước site đang phát triển trên mọi kích thước, hoạt động tốt nhất vì bạn kiểm soát được header
- Demo cho khách hàng: Mở Workspace đã lưu sẵn với đầy đủ khung thiết bị, chỉ cần nhập URL khách hàng là có ngay bản preview chuyên nghiệp
- Chia sẻ cấu hình team: Xuất JSON workspace chứa tập hợp khung thiết bị chuẩn, nhập vào máy đồng nghiệp — cả team cùng kiểm tra trên một bộ kích thước thống nhất
- Kiểm tra iframe embedding: Phát hiện nhanh site nào chặn nhúng iframe (X-Frame-Options/CSP) — công cụ hiển thị cảnh báo rõ ràng, giúp bạn biết đâu là giới hạn bảo mật trình duyệt
- Test trên màn hình lớn: Canvas zoom/pan cho phép xem đồng thời 10+ khung trên màn ultrawide hoặc 4K mà không bị tràn màn hình
- Resize trực tiếp từng khung: Kéo cạnh để test kích thước tuỳ chỉnh giữa các breakpoint chuẩn, khung bị chỉnh sẽ tự động đánh dấu "(đã chỉnh)"
- Tiết kiệm hiệu năng: Tạm dừng (pause) các khung không cần xem để giải phóng RAM/CPU, chỉ tải khung khi cuộn vào vùng nhìn (lazy load via IntersectionObserver)
- Lưu recent URLs: 8 URL gần đây được lưu tự động, nhập nhanh bằng dropdown gợi ý
Tính năng chính
- 100% Client-Side: Mọi thao tác xem trước, zoom, pan, resize diễn ra trong trình duyệt, không upload, không server, không ai xem được URL bạn đang kiểm tra
- Preset thiết bị hiện đại đầy đủ: iPhone SE/16/16 Pro Max, Galaxy S24/A, Pixel 9, Galaxy Z Fold đóng/mở, iPad/iPad Pro, Android Tablet, Laptop 1366/1536/1440, Desktop 1080p/1440p, Ultrawide 21:9/32:9, 4K UHD, 5K — tổng cộng 18 thiết bị
- Breakpoint badge theo chuẩn Tailwind: XS (0px), SM (640px), MD (768px), LG (1024px), XL (1280px), 2XL (1536px) — hiển thị ngay trên plate của mỗi khung
- Kiến trúc render tăng dần (Incremental Keyed Rendering): Mỗi tile chỉ tạo DOM một lần; thêm/xoá/xoay/resize/kéo-thả sắp xếp không bao giờ huỷ iframe của khung khác — fix hoàn toàn lỗi trắng màn hình khi thêm thiết bị
- Lazy load thông minh: iframe chỉ tải khi cuộn vào vùng nhìn (IntersectionObserver + 500px rootMargin), tiết kiệm băng thông và hiệu năng
- Zoom toàn canvas: Ctrl/Cmd + lăn chuột zoom về phía con trỏ, nút +/- trên toolbar, phím tắt Ctrl+0 vừa khung, Ctrl+1 về 100% — zoom từ 5% đến 200%
- Pan kéo-thả: Giữ Space + kéo chuột trái, hoặc giữ chuột giữa (middle click), để di chuyển canvas lớn mượt mà
- Resize khung trực tiếp: Kéo cạnh phải (chiều rộng), cạnh đáy (chiều cao), hoặc góc (cả hai) — badge kích thước live hiển thị khi kéo, giới hạn 100–7680px
- Kéo-thả sắp xếp (flex order): Giữ bezel trên cùng và kéo để đổi thứ tự hiển thị — chỉ thay đổi CSS order, không di chuyển DOM, iframe giữ nguyên không reload
- Workspaces (Bộ khung): Lưu tập hợp khung thiết bị hiện tại với tên tuỳ chọn, mở lại sau, xuất/nhập JSON để chia sẻ — lưu tối đa 30 workspace
- Xoay ngang/dọc từng khung: Một cú click để xoay 90°, kích thước tự đảo chiều, iframe giữ nguyên không reload
- Tạm dừng/Tải lại từng khung: Pause để giải phóng hiệu năng (iframe về about:blank), Play để tải lại — kiểm soát hoàn toàn tài nguyên
- Nhân đôi khung: Một click để clone khung hiện tại với cùng kích thước và trạng thái
- Phát hiện timeout: Tự động báo lỗi nếu khung tải quá 20 giây — thường do site chặn iframe embedding
- Recent URLs: Tự động lưu 8 URL gần nhất vào localStorage, gợi ý khi nhập qua datalist
- Session persistence: URL, zoom level, danh sách khung, trạng thái xoay và kích thước tự động lưu vào localStorage — refresh trang không mất công sức sắp xếp
- Giao diện song ngữ: Hỗ trợ tiếng Việt và tiếng Anh, tự động nhận diện theo trình duyệt, lưu lựa chọn vào localStorage
- Thiết kế chuyên nghiệp: Giao diện tối broadcast calibration bench, typography Space Grotesk + Inter + IBM Plex Mono, responsive trên mọi thiết bị
- Không cần cài đặt: Mở trình duyệt là dùng được, không cần phần mềm, không cần tài khoản, không giới hạn số lần sử dụng
Cách sử dụng
- Truy cập inithtml.com/wasm/init-responsive-lab và nhập URL website cần kiểm tra vào thanh toolbar
- Chọn đúng thiết bị từ danh mục bên trái — Mobile, Foldable, Tablet, Laptop, Desktop, Ultrawide, 4K/5K — hoặc nhập kích thước tuỳ chỉnh
- Tùy chọn: nhấn "+ Thêm bộ mặc định" để nhanh chóng có 3 khung Mobile · Tablet · Desktop
- Xoay khung nếu cần kiểm tra hướng ngang/dọc — nút xoay trên bezel mỗi khung
- Kéo cạnh khung để test kích thước tuỳ chỉnh giữa các breakpoint — kéo cạnh phải, đáy, hoặc góc
- Zoom canvas bằng Ctrl + lăn chuột, hoặc dùng nút +/- trên toolbar — zoom về phía con trỏ
- Pan canvas bằng cách giữ Space + kéo, hoặc giữ chuột giữa, để di chuyển vùng nhìn
- Kéo-thả sắp xếp các khung bằng cách giữ bezel trên cùng và kéo — thứ tự thay đổi, iframe không reload
- Tạm dừng các khung không cần xem để tiết kiệm hiệu năng — nút pause trên mỗi khung
- Nhấn "Lưu bộ hiện tại" trong menu Workspaces để lưu cấu hình khung — đặt tên tuỳ ý
- Sau này chỉ cần mở Workspace đã lưu, nhập URL mới là có ngay bộ preview chuẩn
- Xuất JSON qua "Xuất JSON" để chia sẻ cấu hình với team, hoặc "Nhập JSON" để nhận cấu hình từ đồng nghiệp
- Nhấn "Tải lại tất cả" để refresh toàn bộ iframe khi site đã cập nhật code mới
Vì sao nên dùng Init Responsive Lab?
- Không cần đăng ký tài khoản, không cần cài đặt phần mềm
- 100% client-side — URL không bao giờ rời khỏi thiết bị, bảo mật tuyệt đối
- Đầy đủ preset thiết bị hiện đại từ mobile đến 5K, không cần sở hữu hàng chục thiết bị thật
- Kiến trúc incremental rendering — thêm/xoá/xoay/resize không bao giờ làm trắng màn hình khung khác
- Lazy load thông minh — chỉ tải iframe khi cần, tiết kiệm băng thông và RAM
- Zoom/pan canvas mượt mà — xem 20+ khung trên màn ultrawide mà không bị tràn
- Resize trực tiếp từng khung — test kích thước tuỳ chỉnh giữa các breakpoint chuẩn
- Workspaces — lưu, mở, xuất, nhập bộ khung thiết bị — cả team cùng kiểm tra trên một chuẩn
- Breakpoint badge Tailwind — nhìn một cái biết ngay site đang ở breakpoint nào
- Phát hiện nhanh site chặn iframe — biết ngay đâu là giới hạn bảo mật, đâu là lỗi code
- Session persistence — refresh trang không mất công sức sắp xếp, zoom, và danh sách khung
- Giao diện tối chuyên nghiệp, typography đẹp, không quảng cáo, không phân tâm
- Chạy trên mọi trình duyệt hiện đại: Chrome, Firefox, Safari, Edge
- Tương thích mọi thiết bị: desktop, laptop, tablet, điện thoại
Dù bạn là frontend developer kiểm tra responsive, designer review layout đa thiết bị, team lead cần chuẩn hoá bộ test kích thước, hay bất kỳ ai cần một công cụ xem trước website nhanh, chính xác, an toàn và không giới hạn — Init Responsive Lab sẵn sàng trong vài giây, không rào cản, không lo bảo mật.
