Thiết kế web đáp ứng - Khung nhìn
The Viewport là gì?
Chế độ xem là vùng hiển thị của người dùng trên một trang web.
Chế độ xem thay đổi theo thiết bị và sẽ nhỏ hơn trên điện thoại di động so với 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à các trang web thường 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 để phù hợp với khung nhìn. Để khắc phục điều này, trình duyệt trên các thiết bị đó đã thu nhỏ toàn bộ trang web để 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.
Đặt chế độ xem
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 chế độ xem thông qua
<meta>thẻ.
Bạn nên bao gồm <meta>phần tử khung nhìn 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 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.
Phần width=device-widthđặt chiều rộng của trang tuân 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 tải lần đầu tiên bởi trình duyệt.
Đây là ví dụ về một trang web không có thẻ meta chế độ xem và cùng một trang web có thẻ meta chế độ xem:
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 để xem sự khác biệt.
Kích thước nội dung cho khung nhìn
Người dùng được sử dụng để cuộn 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 hơn khung nhìn, nó 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 để 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 màn hình và chiều rộng trong pixel CSS rất khác nhau giữa các thiết bị, 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 các truy vấn phương tiện CSS để áp dụng các kiểu khác nhau cho các màn hình lớn và nhỏ - Đặt chiều rộng CSS tuyệt đối lớn cho các phần tử 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 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ỏ.