1. Viewport là gì?

Viewport là vùng hiển thị nội dung mà bạn muốn truyền đạt trong trang web của bạn cho người dùng thấy được và cũng là vùng để người dùng tương tác với trang web

Viewport sẽ thay đổi kích thước theo từng thiết bị khác nhau để phù hợp với tùy đối tượng sử dụng

Đối với các trang web chỉ được thiết kế cho màn hình máy tính và các trang web được thiết kế tĩnh và kích thước cố định, nó dẫn đến bất tiện đối với người dùng khi sử dụng thiết bị có kích thước khác với kích thước cố định của trang web đã đặt ra

Trên các trình duyệt của các thiết bị có kích thước màn hình không phù hợp thường thu nhỏ toàn bộ trang web để vừa với màn hình của thiết bị, nó sẽ làm cho trang web của bạn khó thao tác bởi người dùng và ảnh hưởng tới tính thaẩm mỹ của trang web

2. Thiết lập Viewport cho trang web của bạn

HTML5 cho phép các nhà thiết kế web kiểm soát chế độ xem cũng như cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước và tỷ lệ của trang thông qua thẻ <meta> nằm trong cặp thẻ <head>

Cú pháp:

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

Trong đó:

  • width = device-width đặt chiều rộng của trang theo chiều rộng màn hình của thiết bị (sẽ thay đổi tùy theo thiết bị)
  • Initial-scale = 1.0 đặt mức thu phóng ban đầu khi trang được tải lần đầu tiên bởi trình duyệt

Ví dụ:

3. Một số quy tăc của kích thước nội dung Viewport

Khi thiết kế trang web bạn cần lưu ý nội dung trong trang web của bạn phải nằm trên bề ngang của màn hình thiết bị 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. Các phầm tử cũng như ký tự của trang web phải có kích thước đủ lớn trên mọi thiết bị để người dùng không phải zoom khi trải nghiệm

  • KHÔNG sử dụng các phần tử có chiều rộng cố định lớn – Ví dụ: nếu một hình ảnh được hiển thị ở chiều rộng hơn khung nhìn, nó có thể khiến khung nhìn cuộn theo chiều ngang. VÌ vậy cần điều chỉnh nội dung này để vừa với chiều rộng của khung nhìn
  • KHÔNG để nội dung dựa vào chiều rộng khung nhìn cụ thể cố định – Vì kích thước màn hình và chiều rộng của các thiết bị rất khác nhau
  • Sử dụng các truy vấn phương tiện CSS để áp dụng các kiểu khác nhau cho màn hình nhỏ và lớn – Đặt chiều rộng CSS tuyệt cố định lớn cho các phần tử trong trang sẽ khiến phần tử quá rộng cho chế độ xem trên thiết bị nhỏ hơn. Thay vào đó, hãy sử dụng các giá trị chiều rộng tương đối cho các phần tử, ví dụ như như chiều rộng: 100%, auto