Khi bắt đầu một dự án thiết kế website
, thiết kế website responsive là một trong những điều cần xem xét đầu tiên. Và Meta Viewport là thứ quan trọng, biến một website thông thường thành một website responsive. Tham khảo bài viết dưới đây để tìm hiểu meta viewport là gì và tầm quan trọng của nó đối với website.
Meta Viewport là gì?
Meta Viewport là một thẻ được đặt ở phần <head> của HTML, cho trình duyệt biết website sẽ được hiển thị thế nào.
Viewport là khu vực hiển thị nội dung mà người dùng nhìn thấy trên website (có thể hiểu là khung nhìn). Viewport sẽ thay đổi theo thiết bị, viewport trên điện thoại di động sẽ nhỏ hơn so với trên màn hình máy tính.
Viewport không chính xác sẽ khiến người dùng phải cuộn ngang trong khi duyệt web (nội dung tràn màn hình) thay vì website sẽ hiện thị hoàn hảo trên màn hình thiết bị của họ. Thông qua thẻ <meta>, các nhà thiết kế website có thể kiểm soát chế độ xem (kiểm soát kích thước và tỷ lệ của trang web).
► C
ó thể bạn quan tâm: Web Responsive Là Gì? Thông Tin Hữu Ích Nhất Về Website ResponsiveCú pháp meta viewport và các thuộc tính
Ví dụ về cú pháp của thẻ meta viewport:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1">
...
</head>
Ý nghĩa của câu lệnh này có nghĩa là chiều rộng của chế độ xem sẽ bằng chiều rộng thiết bị mà người dùng sử dụng để xem website. Tỷ lệ của website sẽ được đặt thành 100% ( hay chi tỷ lệ nội dung thành 1).
Có nhiều yếu tố có thể thêm vào thẻ meta viewport
.png)
-
width: Chiều rộng của khung nhìn. Thông thường, chiều rộng này sẽ được đặt bằng với chiều rộng thiết bị (device-width) hoặc kích thước responsive thường thấy.
-
initial-scale: Mức thu phóng của website và chiều rộng của chế độ xem. initial-scale thường được đặt bằng 1 (có thể tăng giá trị lên nhưng không được khuyến nghị)
-
minimum-scale: Mức thu phóng tối thiểu. Nghĩa là người dùng có thể thu nhỏ bao nhiêu. Điều này sẽ khiến người dùng mất kiểm soát và yếu tố này cũng không được khuyến nghị.
-
maximum-scale: Mức thu phóng tối đa. Cũng giống như mức thu phóng tối thiểu, thuộc tính này không được khuyến khích vì đánh mất quyền kiểm soát của người dùng.
-
user-scalable: Cho phép người dùng phóng to: giá trị "no" là không cho phép, giá trị "yes" là cho phép. Thực sự thì bạn KHÔNG NÊN sử dụng thuộc tính này trong thẻ meta viewport của mình!
Tại sao cần meta viewport?
Trên các hệ điều hành của máy tính để bàn, khung nhìn của trình duyệt là một số cố định và nội dung của website sẽ được hiển thị trên khung nhìn này.
Với các thiết bị di động, chế độ xem đã bị "ảo". Tức là mặc dù khung nhìn trình duyệt trên điện thoại di động chỉ bằng với kích thước màn hình nhưng trình duyệt lại tạo ra chế độ xem "ảo" lớn hơn và hiển thị nội dung trong đó. Sau đó, Viewport "ảo" đó được thu phóng đến khi phù hợp với kích thước vật lý của thiết bị.
Thẻ meta viewport cho phép nhà thiết kế thông báo cho trình duyệt di động kích thước của viewport ảo này. Điều này là vô cùng quan trọng với thiết kế website responsive - Không thực sự thay đổi
thiết kế website bán hàng cho thiết bị di động (website phiên bản mobile) mà chỉ giúp website hiển thị tốt trên thiết bị di động với kích thước viewport ảo lớn hơn hoặc nhỏ hơn. Nếu không có meta viewport, website sẽ được hiển thị vào chế độ xem ảo mặc định của thiết bị.
Các website thân thiện với thiết bị di động được xếp hạng cao hơn trên các công cụ tìm kiếm. Để đạt được sự thân thiện tối đa cho thiết bị di động với mức đầu tư ít nhất, các website phải giảm thời gian người dùng dành để thay đổi kích thước trang website cho phù hợp với màn hình. Tạo một website responsive với meta viewport là điều vô cùng quan trọng vì chúng có thể hiện thị tốt trên mọi thiết bị.
Định cấu hình viewport của website trên thiết bị di động là cách đơn giản và hiệu quả nhất để tăng tính thân thiện với thiết bị di động. Google cũng từng đề cập đến thẻ meta viewport trong tài liệu tối ưu website của họ.
Trên đây là một vài chia sẻ về meta viewport. Hy vọng những thông tin trong bài viết đã giúp bạn trả lời được câu hỏi Meta viewport là gì và vai trò của nó đối với website.
Trao đổi với Tất Thành về dự án thiết kế Website Responsive của bạn
ĐỘI NGŨ TƯ VẤN CỦA TẤT THÀNH SẼ GIÚP ANH CHỊ TĂNG 50% DOANH THU ĐẾN TỪ THIẾT KẾ WEBSITE