Tags
Thủ thuật IT
Website
(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é :))
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 |
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 (

- 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