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 nội dung 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ị.
Cách kiểm tra thẻ meta chế độ xem của Lighthouse không thành công
Lighthouse gắn cờ trang mà không có thẻ meta khung nhìn:
Trang không vượt qua quá trình kiểm tra trừ khi đáp ứng tất cả các điều kiện sau:
– <head> của tài liệu có chứa một 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 cửa sổ 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.
Thang 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, thường 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.