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

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 máy tính thông thường, sau đó thu nhỏ các trang, khiến chúng khó đọc.

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

Trường hợp kiểm tra thẻ meta chế độ xem của Lighthouse không thành công

Lighthouse gắn cờ các trang không có thẻ meta cửa sổ xem:

Kết quả kiểm tra bằng Lighthouse cho thấy trang thiếu khung nhìn

Một trang sẽ không vượt qua quy 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 chứa thẻ <meta name="viewport">. – Thẻ meta của 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 chế độ xem

Thêm thẻ khung nhìn <meta> 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 từng cặp khoá-giá trị: - width=device-width đặt chiều rộng của khung nhìn thành 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 vào trang.

Initial-scale nhỏ hơn 1

Khi initial-scale được đặt thành dưới 1, điều này có thể khiến trình duyệt bật tính năng nhấn đúp để thu phóng, thường được dùng cho các trang web dành cho máy tính không được tối ưu hoá cho thiết bị di động. Thao tác này sẽ thêm độ trễ 300 mili giây cho mọi lượt tương tác nhấn trong khi trình duyệt chờ để kiểm tra xem có lượt nhấn "nháy đôi" thứ hai hay không. Do đó, quy trình kiểm tra cũng không thành công khi bạn đặt initial-scale thành dưới 1.

Tài nguyên