CSS viewport

Module CSS viewport cho phép chỉ định kích thước, hệ số thu phóng và hướng của khối chứa ban đầu của user-agent, hay còn gọi là viewport.

Nội dung được thiết kế cho viewport lớn có thể gặp nhiều lỗi khi xem trên viewport nhỏ hơn, bao gồm ngắt dòng không mong muốn, nội dung bị cắt xén, và các scroll container có kích thước không chính xác. HTML cung cấp một viewport meta tag, <meta name="viewport">, để cung cấp gợi ý về kích thước ban đầu của viewport. Nếu trang web không được thiết kế để hoạt động tốt trên viewport nhỏ và thẻ này bị bỏ qua, một số trình duyệt di động sẽ hiển thị trang với chiều rộng khối chứa ban đầu cố định, thường là 980px. Nội dung sau đó sẽ bị thu nhỏ, làm cho kích thước CSS pixel nhỏ hơn pixel thực tế. Trang kết quả vừa với không gian màn hình có sẵn nhưng không thể đọc được, yêu cầu người dùng phóng to và cuộn để xem nội dung.

Khối chứa ban đầu viewport đối với phương tiện liên tục có kích thước của viewport. Vì viewport thường không lớn hơn màn hình hiển thị, các thiết bị có màn hình nhỏ hơn như điện thoại hoặc máy tính bảng thường có viewport nhỏ hơn so với các thiết bị lớn hơn như máy tính để bàn hoặc laptop.

Tham chiếu

Thuộc tính

zoom

Khái niệm về Viewport: Khái niệm về viewport — viewport là gì, tác động của nó trong CSS, SVG và thiết bị di động — và sự khác biệt giữa visual viewport và layout viewport.
Sử dụng environment variable: Tổng quan về environment variable là gì, các environment variable do trình duyệt định nghĩa, và cách sử dụng hàm env().
Sử dụng Viewport Segments API: Tạo thiết kế đáp ứng được tối ưu hóa cho các kích thước và cách sắp xếp khác nhau của viewport segment bằng API và environment variable.