Thiết kế web đáp ứng - The Viewport
Khung nhìn là gì?
Chế độ xem là khu vực hiển thị của người dùng trên trang web.
Khung nhìn thay đổi tùy theo thiết bị và sẽ nhỏ hơn trên điện thoại di động so với trên màn hình máy tính.
Trước máy tính bảng và điện thoại di động, các trang web chỉ được thiết kế cho màn hình máy tính và thông thường các trang web có thiết kế tĩnh và kích thước cố định.
Sau đó, khi chúng tôi bắt đầu lướt internet bằng máy tính bảng và điện thoại di động, các trang web có kích thước cố định quá lớn để vừa với khung nhìn. Để khắc phục điều này, các trình duyệt trên các thiết bị đó đã thu nhỏ toàn bộ trang web cho vừa với màn hình.
Điều này không hoàn hảo!! Nhưng một sửa chữa nhanh chóng.
Cài đặt khung nhìn
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 khung nhìn thông qua thẻ <meta> .
Bạn nên bao gồm phần tử khung nhìn <meta> sau trong tất cả các trang web của mình:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Điều này cung cấp hướng dẫn cho trình duyệt về cách kiểm soát kích thước và tỷ lệ của trang.
Phần 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ị).
Phần initial-scale=1.0 đặt mức thu phóng ban đầu khi trang được trình duyệt tải lần đầu tiên.
Dưới đây là ví dụ về một trang web không có thẻ meta khung nhìn và cùng một trang web có thẻ meta khung nhìn:
Mẹo: Nếu bạn đang duyệt trang này bằng điện thoại hoặc máy tính bảng, bạn có thể nhấp vào hai liên kết ở trên để thấy sự khác biệt.
Kích thước nội dung cho khung nhìn
Người dùng thường cuộn các trang web theo chiều dọc trên cả máy tính để bàn và thiết bị di động - nhưng không phải theo chiều ngang!
Vì vậy, nếu người dùng buộc phải cuộn theo chiều ngang hoặc thu nhỏ để xem toàn bộ trang web, điều đó sẽ dẫn đến trải nghiệm người dùng kém.
Một số quy tắc bổ sung cần tuân theo:
1. 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 rộng hơn khung nhìn, điều đó có thể khiến khung nhìn cuộn theo chiều ngang. Hãy nhớ điều chỉnh nội dung này cho vừa với chiều rộng của khung nhìn.
2. KHÔNG để nội dung dựa vào chiều rộng khung nhìn cụ thể để hiển thị tốt - Vì kích thước và chiều rộng màn hình tính bằng pixel CSS rất khác nhau giữa các thiết bị nên nội dung không nên dựa vào chiều rộng khung nhìn cụ thể để hiển thị tốt.
3. Sử dụng truy vấn phương tiện CSS để áp dụng các kiểu dáng khác nhau cho màn hình nhỏ và lớn - Đặt độ rộng CSS tuyệt đối lớn cho các thành phần trang sẽ khiến thành phần quá rộng đối với chế độ xem trên thiết bị nhỏ hơn. Thay vào đó, hãy cân nhắc sử dụng các giá trị chiều rộng tương đối, chẳng hạn như chiều rộng: 100%. Ngoài ra, hãy cẩn thận khi sử dụng các giá trị định vị tuyệt đối lớn. Nó có thể khiến phần tử rơi ra ngoài khung nhìn trên các thiết bị nhỏ.
