Responsive không còn xa lạ gì nữa trong thời đại công nghệ 4.0 này. Có thể bài viết này là quá cũ hoặc không có gì mới đối với một số bạn. Nhưng sẽ hữu ích đối với bạn nào mới tìm hiểu về website hoặc bạn nào không biết gì về website. Mong muốn kiểm tra xem website của mình đã tương thích hoặc xuất hiện trên các trình duyệt cũng như các thiết bị di động thông minh như thế nào.
Tool test responsive không hiếm và khó tìm. Nếu bạn đang duyệt website bằng Chrome, Firefox thì bạn cũng đang sở hữu một công cụ test responsive rồi đầy. Tuy nhiên cách đó thì các developer thường dùng hơn, và nó không dành cho người không rành về website.
Trong bài viết này mình đưa ra 3 Tool mà bạn có thể sử dụng để test độ tương thích dễ dàng nhất.
1 – Công cụ Inspect (Ctrl+ Shift+I) của trình duyệt website
Bạn hoàn toàn có thể sử dụng ngay trình duyệt website để kiểm chứng độ tương thích với các thiết bị di động. Chỉ cần mở Menu Tool (Dấu ba chấm bên trên góc phải trình duyệt) hoặc bấm tổ hợp phím tắt Ctrl + Shift + I là sẽ xuất hiện được một cửa sổ nằm ngang trình duyệt. Bấm tiếp vào biểu tượng hình hai ô vuông kếu dấu mũi tên là được.
Giờ đây bạn đã có thể lựa chọn các thiết bị khác nhau để xem website của mình xuất hiện thế nào trên các thiết bị tương ứng.
Đối với Safari bạn phải bật chế độ Developer lên thì mới thấy được tính năng này.
2 – Sử dụng công cụ Online để test Responsive: Am I Responsive?
Đây là công cụ giúp bạn kiểm tra trực quan hơn với khung hình đẹp mắt. Bạn có thể chụp lại hình ảnh này để làm ảnh bìa cho các bài viết. Hoặc làm ảnh đại diện cho một dự án website nào đó của bạn nhìn khá chuyên nghiệp. Có khá nhiều tool test responsive tương tự như vậy nếu bạn tìm với từ khóa “Tool test Responsive”
Link tool: http://ami.responsivedesign.is/
Bạn có thể test trực tiếp bằng cách sử dụng cấu trúc http://ami.responsivedesign.is/?url=http://www.yoursite.com
Ví dụ:
http://ami.responsivedesign.is/?url=https://tranquocdai.com
3 – Chia sẻ mã nguồn Code Tool Test Responsive
Đây là mã nguồn mở mình tìm thấy được và thấy khá ổn nên chia sẻ lại cho mọi người. Dựa trên mã nguồn này các bạn có thể tùy ý điều chỉnh thành tool của cá nhân mà sử dụng cho công việc. Hy vọng giúp ích được cho mọi người
Link demo tool: https://tool.tranquocdai.com/responsive/?url=https://tranquocdai.com/
Link tải tool miễn phí: http://123link.vip/jipRuO