Cách kiểm tra giao diện mobile, hay còn gọi là Responsive trên trình duyệt Chrome. Rất đơn giản, không cần phần mềm, không cần phải có điện thoại, cũng không phải kéo co giản màn hình như nhiều bạn trước nay vẫn làm...cách kiểm tra này hoàn toàn chính xác, và có nhiều lựa chọn các dòng điện thoại nữa. Điều mà chắc chắn từ trước đến nay không một phần mềm hay website nào cung cấp được như vậy cả.

 



Về lý do vì sao mà chúng ta cần thiết kế website, wordpress hay blogger phải đáp ứng trải nghiệm người dùng thì ai cũng hiểu rồi. Hiện nay, người dùng internet đang có xu hướng chuyển dịch sang dùng và lướt web trên các thiết bị di động, và việc website của chúng ta đạt chuẩn và có thiết kế dành riêng cho di động chính là lợi thế không phải website nào cũng có. Đặc biệt hơn, Google còn ưu tiên những website nào chuẩn Responsive và đáp ứng được người dùng di động để nâng hạng nó trên trình duyệt tìm kiếm bằng di động nữa đó. Nên các bạn khi thiết kế web cần đón đầu xu thế đó. Đầu tiên bạn cần vào GOOGLE Mobile-Friendly Test để kiểm tra xem website mình đã chuẩn và thân thiện với Mobile chưa. Google đo lường qua công cụ này nhé!


Giờ chúng ta sẽ qua cách kiểm tra giao diện Mobile Responsive cho website bằng Chrome
Bước 1 - Hãy click chuột phải ở bất cứ điểm nào trên website của bạn và kiểm tra phần từ view source nhé!



Bước 2 - Hãy click vào biểu tượng Mobile ở góc trái khu vực code sau khi kiểm tra phần tử.





Bước 3 - Sau khi click vào các bạn sẽ đến được chương trình kiểm tra giao diện mobile của Chrome nhé!


Đây là giao diện kiểm tra tương thích của website trên các thiết bị di đông, gồm nhiều dòng máy và các mạng chúng ta đang dùng. Chúng ta có thể điều chỉnh kích thước muốn kiểm tra. Ghi chú: Bạn cần click vào một bài đăng bất kỳ trong chương trình này hoặc tải lại địa chỉ để kiểm tra cho chính xác nha!


Ở phần Device - Bạn có thể chọn các dòng điện thoại smartphone muốn kiểm tra nhé!


Ở phần Network - Bạn chọn các mạng mà bạn đang dùng nhé, chẳng hạn như ADSL hay 3G

Các tiện ích nhỏ khác như kích thước, xoay chiều...mở rộng đều được Google Chrome tích hợp cả, bạn cứ vọc thoải mái nha!
Theo: http://www.terocket.com/2014/12/kiem-tra-giao-dien-mobile-responsive-website-tren-chrome.html

Đăng bởi : John Nguyễn Văn Dũng, ngày: 05-12-2014