Kiểm tra thiết kế web di động bằng Chrome

Bài viết hướng dẫn dùng Chomre để kiếm tra thiết kế website cho di động. Chrome là trình duyệt tuyệt vời, và luôn luôn tuyệt vời. Dù gần đây những máy cấu hình “yếu” chạy Chrome khá là ỳ ạch không giống như thời mới khai sinh.

Hôm nay mình mới để ý Chrome phiên bản mới nhất như mình đang sử dụng Version 33.0.1750.154 m (tự nó luôn update) có thêm phần kiểm tra website cho thiết bị di động. Hay nói chính xác là Chrome sẽ giả lập thiết bị di động để kiểm tra cách hiển thị của website trên đó.

Đầu tiên các bạn vào website cần hiển thị, click chuột phải sau đó chọn Inspect element (Kiểm tra phần tử) lựa chọn cuối cùng khi bạn click chuột phải

chrome-kiem-tra-web

Ở phần hiển thị ra bạn chọn Emulation lựa chọn thứ 3 ở phần dưới, sau đó chọn thiết bị bạn muốn giả lập, sau đó nhất nút Emulate trình duyệt sẽ giả lập về thiết bị bạn muốn

kiem-tra-website-tren-di-dong

Sau đó muốn chuyển về chế độ bình thường bạn chỉ cần tắt phần Inspect element đi hoặc nhấn Reset.

Cập nhật 14/04

kiemtrawebdidong
Bạn lưu ý lựa chọn theo mũi tên sẽ thấy phần Emulation

Có rất nhiều công cụ giúp bạn làm việc này, tuy nhiên sử dụng trình duyệt Chrome sẽ khiến công việc nhanh hơn, và chuẩn hơn. Hướng dẫn khá đơn giản, chúc các bạn thiết kế được những website cho di động đẹp và theo chuẩn.

Bài hướng dẫn cách dùng trình duyệt Chrome để kiểm tra giao diện website trên smartphone, hay cách hiển thị của của website trên mobile, thiết bị di động.

3 thoughts on “Kiểm tra thiết kế web di động bằng Chrome

  1. Rất vui được biết bạn, tôi có website nhưng không biết kiếm tiền từ đâu, bạn có thể chỉ cho tôi biết được không? tôi mới tự học chứ chưa biết gì nhiều, Tôi thấy dùng Firefox cũng hay mà…

  2. He he, em cũng mới để ý cái đó thôi Jam, có nó đỡ bao nhiêu thứ linh tinh khác đó nhé 😉

Leave a Reply

Your email address will not be published. Required fields are marked *