Nếu không có thẻ meta viewport, thiết bị di động sẽ hiển thị các trang ở độ rộng màn hình máy tính thông thường rồi giảm tỷ lệ các trang, khiến người dù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 viewport để viewport có kích thước phù hợp trên mọi thiết bị.
Cách kiểm tra thẻ meta cửa sổ xem Lighthouse không thành công
Lighthouse gắn cờ những trang không có thẻ meta cửa sổ xem:
Một trang 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 khung hiển thị chứa thuộc tính content.
– Giá trị của thuộc tính content có chứa văn bản width=.
Cách thêm thẻ meta chế độ xem
Thêm thẻ <meta> khung hiển thị 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>
…
Sau đâ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 hiển thị 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.
Tỷ lệ ban đầu nhỏ hơn 1
Khi initial-scale được đặt thành nhỏ hơn 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. Điều này sẽ thêm độ trễ 300 mili giây vào mọi tương tác nhấn trong khi trình duyệt chờ kiểm tra xem có xảy ra lần nhấn "đúp" thứ hai hay không. Do đó, quá trình kiểm tra cũng sẽ thất bại khi initial-scale được đặt thành nhỏ hơn 1.