Làm cách nào để sử dụng thẻ Meta Viewport cho thiết kế web đáp ứng trong HTML?

Blog này sẽ giải thích cách sử dụng thẻ meta chế độ xem cho thiết kế web đáp ứng trong HTML:

• Thẻ Meta Viewport là gì?
• Các thuộc tính khác nhau của thẻ Meta

Thẻ Meta Viewport là gì?

Các ' khung nhìn ” là thẻ quan trọng nhất để tạo thiết kế đáp ứng bằng cách kiểm soát cách nội dung xuất hiện trên các kích thước màn hình khác nhau. Thẻ này được đặt bên trong “ <đầu> ” và nó chứa hai thuộc tính trong đó. Đầu tiên là “ tên ” thuộc tính cho biết mục đích của thẻ này và thuộc tính thứ hai là “ nội dung ” chứa dữ liệu liên quan đến giá trị được cung cấp trong “ tên ' thuộc tính.

Các thuộc tính khác nhau của thẻ Meta Viewport

Thẻ meta chế độ xem có các thuộc tính sau có thể được đặt làm giá trị cho “ nội dung ' thuộc tính:

thuộc tính 'chiều rộng'

Các ' chiều rộng ” thuộc tính chỉ định khu vực hiển thị của trang web cho nội dung theo chiều dọc. Thẻ meta của nó trông như thế này:

thuộc tính chiều cao

Các ' chiều cao ” thuộc tính đặt độ dài theo chiều dọc của trang web để đảm bảo rằng chiều cao của chế độ xem khớp với chiều cao màn hình. Thẻ meta của nó trông như thế này:

Thuộc tính 'tỷ lệ ban đầu'

Các ' quy mô ban đầu ” thuộc tính đảm bảo rằng trang web được hiển thị ở mức thu phóng phù hợp khi tải lần đầu. Chẳng hạn, hãy truy cập mã dưới đây:

thuộc tính 'tỷ lệ tối đa'

Các ' quy mô tối đa ” thuộc tính chỉ định mức thu phóng tối đa cho trang web để ngăn các vấn đề về bố cục:

thuộc tính “tỷ lệ tối thiểu”

Các ' quy mô tối thiểu ” được sử dụng để hạn chế người dùng thu nhỏ quá nhiều bằng cách chỉ định mức tỷ lệ thu nhỏ tối thiểu:

thuộc tính “người dùng có thể mở rộng”

Các ' người dùng có thể mở rộng ” thuộc tính cho phép hoặc không cho phép người dùng thu nhỏ hoặc phóng to màn hình trang web bằng cách đặt giá trị thành “ KHÔNG ' hoặc ' Đúng ”. Thẻ meta cho phép người dùng phóng to hoặc thu nhỏ là:

Làm cách nào để sử dụng thẻ Meta Viewport cho thiết kế web đáp ứng trong HTML?

Để hiểu rõ hơn về cách sử dụng thẻ meta chế độ xem cho thiết kế web đáp ứng. Hãy để chúng tôi đi qua một ví dụ:

Giả sử bên trong “