Viewport Meta Tag Là Gì? Cách Khai Thẻ Viewport Đúng

Viewport meta tag là gì và thiếu nó thì trang ra sao?

Viewport meta tag là thẻ cho trình duyệt biết cách điều khiển kích thước và tỷ lệ của trang. Thiếu thẻ này, thiết bị di động dựng trang ở bề ngang của màn hình máy tính, thường khoảng 980px theo web.dev, rồi thu cả trang nhỏ lại. Chữ thành ra khó đọc và người dùng phải phóng to mới thao tác được.

Phần giải thích đầy đủ nằm ở bài Responsive web design basics của web.dev.

Một dòng trong phần head quyết định trang có đọc được trên điện thoại hay không.

Lighthouse kiểm thẻ viewport theo những điều kiện nào?

Lighthouse kiểm thẻ viewport theo ba điều kiện: phần head của trang có thẻ meta name="viewport", thẻ đó có thuộc tính content, và giá trị của content có chữ width=. Thiếu một điều kiện là trang trượt. Trang cũng trượt khi initial-scale đặt nhỏ hơn 1.

Lý do của điều kiện cuối: initial-scale nhỏ hơn 1 có thể làm trình duyệt bật tính năng chạm hai lần để phóng to. Khi đó trình duyệt chờ xem có lần chạm thứ hai không, nên mỗi lần chạm bị trễ thêm 300 mili giây. Độ trễ này ảnh hưởng trực tiếp tới cảm giác phản hồi của trang, tức liên quan tới INP.

Từ Lighthouse 13, phần kiểm này nằm trong mục Optimize viewport for mobile. Chi tiết ở tài liệu Lighthouse về thẻ viewport.

Có thẻ, có content, có width=, và initial-scale không nhỏ hơn 1.

Khai thẻ viewport đúng và tránh những giá trị nào?

Khai thẻ viewport đúng là đặt một thẻ meta name="viewport" trong phần head với content là width=device-width, initial-scale=1. web.dev không khuyên dùng thêm minimum-scale, maximum-scale và user-scalable, vì ba giá trị này có thể chặn người dùng phóng to trang, gây khó cho người cần chữ lớn.

Ba việc khi khai thẻ viewport

• Đặt đúng chỗ: thẻ nằm trong phần head, mỗi trang một thẻ.
• Giữ hai giá trị chuẩn: width=device-width và initial-scale=1, ngăn nhau bằng dấu phẩy.
• Không khóa phóng to: bỏ maximum-scale=1 và user-scalable=no nếu theme đang khai.

Với WordPress, thẻ viewport do theme in ra. Cách kiểm nằm ở bài SEO WordPress #17: mobile.

Giữ đúng hai giá trị chuẩn, không thêm giá trị nào khóa việc phóng to.

Có thẻ viewport rồi mà trang vẫn cuộn ngang thì sửa gì?

Có thẻ viewport rồi mà trang vẫn cuộn ngang là do có nội dung rộng hơn khung nhìn. Theo web.dev, người dùng quen cuộn dọc, không quen cuộn ngang, và trường hợp hay gặp là một tấm ảnh có kích thước cố định lớn hơn màn hình. Cách sửa là cho nội dung co theo khung nhìn.

Ba chỗ hay làm trang tràn ngang

• Ảnh kích thước cố định: đặt max-width: 100% để ảnh co theo chỗ trống mà không bị kéo giãn quá cỡ gốc.
• Phần tử khai bề ngang tuyệt đối: đổi sang đơn vị tương đối, nội dung không nên dựa vào một bề ngang cụ thể.
• Bảng rộng: cho bảng nằm trong một khung cuộn ngang riêng, phần còn lại của trang đứng yên.

Chuẩn P1.19 của SQA-200 yêu cầu trang co giãn ở bề ngang 320 tới 430 px mà không cuộn ngang. Cách dò từng lỗi hiển thị trên nhiều thiết bị nằm ở bài mobile usability engineering.

Thẻ viewport mở đường, phần CSS phải tự co theo màn hình.

Thẻ viewport nằm ở đâu trong bảng chuẩn SQA-200?

Thẻ viewport là mục P1.21 trong bảng chuẩn SQA-200, thuộc trụ cột I về kỹ thuật và Core Web Vitals, trọng số 1 điểm. Chuẩn đạt của mục này: thẻ meta viewport khai width=device-width, initial-scale=1.0. Mục này đứng ngay sau mục tap target và trước mục phân trang.

Các mục đứng cạnh P1.21 trong trụ cột I

• P1.19 Mobile Responsive Design: trang hiển thị co giãn ở bề ngang 320 tới 430 px, không cuộn ngang.
• P1.20 Tap Target Spacing: nút và link trên di động có vùng chạm tối thiểu 48 x 48 px.
• P1.22 Pagination Tag Logic: trang lưu trữ nhiều trang có rel next/prev hoặc xử lý tham số canonical gọn.
• P1.23 Hreflang Multi-Region: site đa ngôn ngữ, đa vùng có hreflang khai hai chiều.

Toàn bộ 99 mục kiểm, chuẩn đạt và điểm từng mục nằm ở bài SQA-200 là gì, mục này ở dòng P1.21 Viewport Tag Alignment.

P1.21 đạt khi mọi trang có thẻ meta viewport với width=device-width và initial-scale=1.

Người làm website hay hỏi gì về thẻ viewport?

Người làm website hay hỏi ba câu về thẻ viewport: có nên khóa phóng to không, kiểm thẻ ở đâu, và thẻ viewport có phải là responsive không. Ba câu trả lời dưới đây lấy từ tài liệu Lighthouse và web.dev của Google.

Có nên khóa phóng to bằng user-scalable=no không?

Không nên. web.dev ghi rõ không khuyên dùng minimum-scale, maximum-scale và user-scalable, vì các giá trị này có thể chặn người dùng phóng to khung nhìn và gây vấn đề về khả năng tiếp cận. Người mắt kém cần phóng to chữ để đọc. Giữ đúng hai giá trị width=device-width và initial-scale=1 là đủ.

Kiểm thẻ viewport của một trang ở đâu?

Mở mã nguồn trang rồi tìm chữ viewport trong phần head, hoặc chạy Lighthouse. Lighthouse nêu trang không có thẻ, thẻ thiếu thuộc tính content, giá trị thiếu width=, hoặc initial-scale nhỏ hơn 1. Từ Lighthouse 13, kết quả nằm trong mục Optimize viewport for mobile của báo cáo.

Có thẻ viewport thì trang đã là responsive chưa?

Chưa. Thẻ viewport chỉ báo trình duyệt dựng trang theo bề ngang thiết bị. Phần còn lại là việc của CSS: ảnh co theo khung, bố cục đổi theo bề ngang, chữ đủ lớn. Trang có thẻ viewport mà CSS khai bề ngang cố định thì vẫn tràn ngang trên điện thoại.

Thẻ viewport là điều kiện cần, CSS co giãn là điều kiện đủ.