[RWD Bài 2] Viewport Là Gì ? Và Cách Thiết Lập Viewport

Viewport la gi va minh hoa giua viec co va khong su dung Viewport meta tag

Viewport là gì và minh họa giữa việc có sử dụng và không có Viewport meta tag

Trong bài viết này chúng ta sẽ tìm hiểu xem Viewport là gì ? Và cách thiết lập Viewport trong Responsive Web Design.

Viewport là gì ?

Viewport là khu vực mà người dùng có thể dòm thấy nội dung của trang web. Có thể tạm dịch là KHUNG NHÌN.

Viewport sẽ khác nhau với các thiết bị khác nhau, Viewport của điện thoại sẽ nhỏ hơn kha khá nhiều so với của Desktop, TV,…

Cách thiết lập Viewport trong Responsive Web Design

HTML5 giới thiệu một phương pháp để cho phép các nhà thiết kế web kiểm soát viewport, thông qua thẻ <meta>. Bạn có thể thiết lập meta viewport bằng cách đặt vào trong cặp thẻ <head> như sau:

<meta name="viewport" content="width=device-width, initial-scale=1">

Thẻ <meta> viewport thiết lập cho trang web hiển thị tương ứng với kích thước của từng thiết bị khác nhau.
Thuộc tính width=device-width đặt chiều rộng của trang web theo chiều rộng màn hình của thiết bị.
Thuộc tính initial-scale=1.0 thiết lập mức độ phóng ban đầu khi trang được trình duyệt tải lần đầu tiên, người dùng sẽ không thể zoom khi thuộc tính này có giá trị bằng 1.

Đây là một ví dụ đơn giản có thiết lập viewport:

<!DOCTYPE html>
<html>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <body>
      <h2>Setting the Viewport</h2>
      <p>This example does not really do anything, other than showing you how to add the viewport meta element.</p>
   </body>
</html>

Lưu ý: Bạn cần phải thiết lập Viewport trong Responsive Web Design vì nếu không làm nó sẽ như cái ảnh minh họa cở đầu bài đấy nhé !

Một số quy tắc bổ sung cần tuân thủ với kích thước nội dung Viewport

Nội dung web phải luôn nằm trong giới hạn kích thước của chiều ngang màn hình, người dùng chỉ cần cuộn dọc từ trên xuống để xem được hết nội dung của trang web dễ dàng. Vì vây, nếu để người dùng phải cuộn ngang hoặc zoom trang web mới xem được toàn bộ nội dung sẽ dẫn đến trải nghiệm người dùng kém.

Không sử dụng các HTML element có chiều rộng cố định quá lớn – Ví dụ: Một hình ảnh có chiều rộng quá lớn so với chiều rộng của các thiết bị nhỏ thì khi hiển thị trên các thiết bị này hình ảnh sẽ bị tràn ra ngoài và cần phải cuộn ngang để xem được toàn bộ ảnh. Vì vậy, cần phải điều chỉnh hỉnh ảnh sao cho phù hợp với chiều rộng của từng thiết bị.
KHÔNG để thiết lập Responsive dựa vào chiều rộng cụ thể mà thay vào đó là từ kích thước nào đến kích thước nào nó sẽ hiển thị giống nhau. Ví dụ từ 240px lên 420px sẽ hiển thị giống nhau, lên trên 420px đến 720px nó giống nhau chẳng hạn.

Sử dụng các giá trị chiều rộng tương đối cho đối tượng trong một số trường hợp nhằm tránh bị tràn ra khi xem trên màn hình nhỏ mà lại quá bé khi xem trên màn hình lớn. Thường thì ta có thế thiết lập độ rộng auto hoặc giá trị là 100% .

Bài trước đó và tiếp theo