Thiết kế trang web tương tác - Viewport

Viewport là gì?

Viewport (viewport) là khu vực mà người dùng có thể nhìn thấy trên trang web.

Viewport thay đổi theo thiết bị, trên điện thoại di động sẽ nhỏ hơn so với màn hình máy tính.

Trước khi có máy tính bảng và điện thoại, các trang web chỉ được thiết kế để sử dụng trên màn hình máy tính, và việc trang web có thiết kế tĩnh và kích thước cố định là rất phổ biến.

Sau đó, khi chúng ta bắt đầu sử dụng máy tính bảng và điện thoại để truy cập internet, các trang web có kích thước cố định quá lớn để phù hợp với viewport. Để giải quyết vấn đề này, trình duyệt trên các thiết bị này sẽ thu nhỏ toàn bộ trang web theo tỷ lệ để phù hợp với kích thước màn hình.

Đây không phải là hoàn hảo! Đây chỉ là một cách sửa chữa nhanh chóng.

đặt viewport

HTML5 đã giới thiệu một phương pháp để các nhà thiết kế web có thể <meta> thẻ để kiểm soát viewport.

Bạn nên bao gồm các thẻ sau trong tất cả các trang web để kiểm soát viewport. <meta> Thẻ viewport:

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

Nó cung cấp cho trình duyệt các hướng dẫn về cách kiểm soát kích thước và tỷ lệ phóng của trang web.

width=device-width Một số phần sẽ thiết lập độ rộng của trang web theo độ rộng màn hình của thiết bị (tùy thuộc vào thiết bị).

Khi trình duyệt lần đầu tiên tải trang webinitial-scale=1.0 Một số thiết lập cấp độ phóng ban đầu.

Dưới đây là các ví dụ về trang web không có thẻ meta viewport và trang web có thẻ meta viewport:

Lưu ý:Nếu bạn duyệt trang này trên đ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 dưới đây để xem sự khác biệt.



Không có thẻ viewport meta.


Có thẻ viewport meta.

Chỉnh sửa nội dung để phù hợp với kích thước của khung nhìn.

Người dùng có thói quen cuộn dọc trên máy tính để bàn và thiết bị di động, thay vì cuộn ngang!

Vì vậy, nếu bắt buộc người dùng phải cuộn ngang hoặc thu nhỏ để xem toàn bộ trang web, điều này sẽ dẫn đến trải nghiệm người dùng không tốt.

Cần tuân thủ một số quy tắc bổ sung:

- Không sử dụng các yếu tố chiều rộng cố định lớn - Ví dụ, nếu chiều rộng của hình ảnh lớn hơn chiều rộng viewport, có thể dẫn đến cuộn ngang viewport. Đảm bảo điều chỉnh nội dung này để phù hợp với chiều rộng viewport.

- Đừng để nội dung phụ thuộc vào chiều rộng viewport cụ thể để hiển thị tốt - Do kích thước và chiều rộng màn hình bằng pixel thay đổi rất nhiều giữa các thiết bị, nội dung không nên phụ thuộc vào chiều rộng viewport cụ thể để hiển thị tốt.

- Sử dụng điều tra truyền thông CSS để áp dụng các樣式 khác nhau cho màn hình nhỏ và lớn - Đặt chiều rộng tuyệt đối lớn hơn CSS cho các yếu tố trang sẽ làm cho yếu tố đó quá rộng trên các thiết bị nhỏ hơn. Thay vào đó, bạn nên考虑 sử dụng các giá trị chiều rộng tương đối, chẳng hạn như width: 100%. Ngoài ra, hãy cẩn thận khi sử dụng các giá trị tuyệt đối lớn hơn, điều này có thể làm cho yếu tố trượt ra khỏi viewport của thiết bị nhỏ.