Không có thẻ có chiều rộng hoặc tỷ lệ ban đầu

Nhiều công cụ tìm kiếm xếp hạng các trang dựa trên mức độ thân thiện với thiết bị di động của chúng. Nếu không có thẻ meta viewport, thiết bị di động sẽ hiển thị các trang ở chiều rộng màn hình thông thường trên máy tính và sau đó thu nhỏ các trang, khiến các trang khó đọc.

Việc đặt thẻ meta khung nhìn cho phép bạn kiểm soát chiều rộng và tỷ lệ của khung nhìn sao cho có thể xác định kích thước chính xác trên tất cả các thiết bị.

Cách thức kiểm tra thẻ meta chế độ xem Lighthouse không thành công

Lighthouse gắn cờ các trang không có thẻ meta khung nhìn:

Kiểm tra Lighthouse cho thấy trang thiếu khung nhìn

Một trang không vượt qua được quá trình kiểm tra trừ phi đáp ứng tất cả các điều kiện sau: – <head> của tài liệu có chứa thẻ <meta name="viewport">. – Thẻ meta khung nhìn chứa thuộc tính content. – Giá trị của thuộc tính content bao gồm văn bản width=.

Cách thêm thẻ meta khung nhìn

Thêm một thẻ <meta> khung nhìn có các cặp khoá-giá trị thích hợp vào <head> của trang:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

Dưới đây là chức năng của mỗi cặp khoá-giá trị: – width=device-width đặt chiều rộng của khung nhìn bằng chiều rộng của thiết bị. – initial-scale=1 đặt mức thu phóng ban đầu khi người dùng truy cập trang.

Tài nguyên