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:
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.
Thang đo ban đầu nhỏ hơn 1
Khi bạn đặt initial-scale thành nhỏ hơn 1, điều này có thể khiến các trình duyệt bật tính năng nhấn đúp để thu phóng. Tính năng này thường dùng cho những trang web trên 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 tương tác nhấn trong khi trình duyệt chờ kiểm tra xem lần nhấn "hai" thứ hai có xảy ra hay không. Do đó, quá trình kiểm tra cũng không thành công khi thang đo ban đầu được đặt nhỏ hơn 1.