Viewport Resizer - công cụ giúp quản trị viên có thể kiểm tra tính đáp ứng của website một cách cực kỳ hiệu quả.

Kiểm tra website responsive bằng Viewport Resizer

Với sự phát triển mạnh mẽ của các thiết bị thông minh, website của bạn cũng cần phải được "nâng cấp" để hiển thị tốt nhất trên nhiều màn hình với các kích cỡ khác nhau. Website responsive là thuật ngữ ám chỉ điều đó.

Vậy, làm thế nào để chúng ta có thể kiểm tra được tính đáp ứng của 1 website. Có một cách thủ công và rất đơn giản : dùng chuột để điều chỉnh kích thước của trình duyệt, co giãn từ to đến nhỏ dần và ngược lại. Cách này khá nhanh, nhưng lại không mấy hiệu quả.

Công cụ Viewport Resizer

Viewport Resizer là một công cụ có thể tương tác với trình duyệt để kiểm tra độ responsive của website. Không cài đặt, chỉ cần lưu vào bookmark là bạn có thể sử dụng ngay lập tức. Ngay từ lần sử dụng đầu tiên, mình đã cực kỳ hài lòng với Viewport Resizer.

Ưu điểm : Viewport Resizer cung cấp cho chúng ta khá đầy đủ các kích cỡ màn hình. Thao tác đơn giản, chỉ việc click để kiểm tra từng giao diện tương ứng.

Nhược điểm : javascript hoặc jquery có thể chạy sẽ không mượt mà cho lắm.
Ok, giờ đến phần thao tác nhé :)

Hiển thị thanh đánh dấu (bookmarks)

Với trình duyệt Chrome, Cốc Cốc
- Tại thanh công cụ, nhấn vào biểu tượng "tùy chỉnh và điều khiển". (Cốc cốc ở bên trái hoặc Chrome ở bên phải)
- Chọn Dấu trang / Hiển thị dấu trang

Bookmarks trên trình duyệt Cốc Cốc

Với trình duyệt Firefox : trên thanh công cụ, chọn View / Toolbars / Bookmarks Toolbar

Bookmarks trên trình duyệt Firefox

Đánh dấu Viewport Resizer

- Truy cập địa chỉ : http://lab.maltewassermann.com/viewport-resizer/
- Đưa con trỏ vào khung màu xanh, sau đó kéo và di chuyển con trỏ lên thanh bookmark vừa được hiển thị.


- Truy cập website cần kiểm tra tính responsive.
- Nhấn vào biểu tượng () và đợi 1 lát, công cụ Resizer sẽ xuất hiện.


- Tại đây, bạn có thể kiểm tra tính responsive của website bằng cách click vào từng icon. Mỗi icon sẽ đại diện cho 1 màn hình thiết bị tương ứng. Từ thấp nhất 320x480 (iPhone4) cho tới FullHD.

Lời kết

---

Từ khóa tìm kiếm :