Hôm nay Terocket sẽ hướng dẫn các bạn 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ả.

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
Giao diện mobile responsive dành cho website cực kỳ quan trọng, hãy biết tận dụng lợi thế đó bạn nhé!

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

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
Sau khi kiểm tra xong, bạn sẽ được thông báo như thế này đó. CLICK VÀO ẢNH ĐỂ XEM ẢNH LỚN 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é!

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
Hãy click chuột phải và kiểm tra phần tử xem cả nhà 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ử.
[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
Click vào biểu tượng mobile được khoanh tròn đó bạn nhé!

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

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
Đâ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!

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
 Ở phần Device - Bạn có thể chọn các dòng điện thoại smartphone muốn kiểm tra nhé!

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
 Ở 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!

[Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome
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!

Ok vậy là đã xong thủ thuật [Tips] - Cách kiểm tra giao diện Mobile/Responsive cho website chính xác dễ dàng trên Chrome rồi. Đây là thủ thuật kiểm tra đơn giản nhưng không phải ai cũng biết cả. Đặc biệt với những bạn đang thiết kế website hoặc mới tập thiết kế blog.

Việc website tương thích với các thiết bị di động sẽ rất cần thiết sau này dành cho các bạn. Ở thời đại mà việc lướt net bằng thiết bị di động đang dần chiếm lĩnh rồi!

Bạn có thể tìm hiểu một số bài viết khác đến Mobile Responsive tại Terocket

  1. Khái niệm và ứng dụng của Responsive trong Web design
  2. Thiết kế Responsive Blogger Template khi xem bằng mobile và PC
  3. Responsive dropmenu đơn giản từ CSS3 cho blogger

Trứng Vịt - Terocket