Thẻ Meta đáp ứng - Thủ thuật CSS

Anonim

Tôi có xu hướng sử dụng cái này:

Mặc dù tôi thấy điều này được khuyến khích rất nhiều:

Điều này có nghĩa là trình duyệt sẽ (có thể) hiển thị chiều rộng của trang bằng chiều rộng của màn hình của chính nó. Vì vậy, nếu màn hình đó rộng 320px, cửa sổ trình duyệt sẽ rộng 320px, thay vì thu nhỏ và hiển thị 960px (hoặc bất cứ điều gì thiết bị đó làm theo mặc định, thay cho thẻ meta đáp ứng).

Lưu ý: không sử dụng thẻ meta đáp ứng nếu trang web của bạn không được thiết kế đặc biệt để đáp ứng và hoạt động tốt ở kích thước đó, vì nó sẽ khiến trải nghiệm tồi tệ hơn.

Có nhiều thuộc tính hơn mà thẻ này hỗ trợ:

Bất động sản Sự miêu tả
chiều rộng Chiều rộng của khung nhìn ảo của thiết bị.
chiều rộng thiết bị Chiều rộng vật lý của màn hình thiết bị.
Chiều cao Chiều cao của "khung nhìn ảo" của thiết bị.
chiều cao thiết bị Chiều cao vật lý của màn hình thiết bị.
quy mô ban đầu Thu phóng ban đầu khi truy cập trang. 1.0 không phóng to.
quy mô tối thiểu Số tiền tối thiểu mà khách truy cập có thể thu phóng trên trang. 1.0 không phóng to.
quy mô tối đa Số tiền tối đa mà khách truy cập có thể thu phóng trên trang. 1.0 không phóng to.
người dùng có thể mở rộng Cho phép thiết bị phóng to và thu nhỏ. Giá trị là có hoặc không.

Thông thường, bạn không nên ngăn chặn việc mở rộng quy mô, vì điều đó gây khó chịu và có khả năng là một vấn đề trợ năng.

Bạn cũng có thể muốn điều này trong CSS của mình:

@-ms-viewport( width: device-width; )

Điều cần biết: việc thay đổi giá trị của thẻ meta này bằng JavaScript không hoạt động, trang sẽ phản ứng với giá trị mới. Loại bỏ toàn bộ thẻ và thay thế hoặc thay đổi thuộc contenttính. Không phải là một nhu cầu cao siêu phổ biến, nhưng nó có thể xuất hiện.