Kiểm tra website responsive bằng Viewport Resizer - 123itvn.com


Cộng đồng vui bựa status Tham gia đê
(Góc Paypal)
Tỷ giá tốt, độ trust cao và nhận tiền nhanh chóng! Liên hệ ngay để được trải nghiệm dịch vụ mua dollar paypal - thanh toán hộ paypal uy tín nhất Việt Nam hàng trăm năm qua nhé :))

Kiểm tra website responsive bằng Viewport Resizer


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
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

Kiểm tra website responsive bằng Viewport Resizer
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

Kiểm tra website responsive bằng Viewport Resizer
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ị.

Kiểm tra website responsive bằng Viewport Resizer

- 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.

Kiểm tra website responsive bằng Viewport Resizer

- 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



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é. 


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

  • kiểm tra website responsive bằng viewport resizer
  • công cụ viewport resizer
  • check responsive bằng viewport resizer
  • viewport resizer kiểm tra tính đáp ứng website

Có thể bạn sẽ thích

Bình luận !