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
Với trình duyệt Firefox : trên thanh công cụ, chọn View / Toolbars / Bookmarks Toolbar
Đá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 Resizer 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 320×480 (iPhone4) cho tới FullHD.
Lời kết
Dựa trên giao diện mà Viewport Resizer hiển thị, bạn có thể thay đổi code HTML, CSS để mọi thứ nhìn ổn hơn. Tuy nhiên, hãy đảm bảo là bạn nắm vững về code nhé.
