Khung nhìn ảo là gì?

Trong Chrome M40, có một thay đổi khá nhỏ đối với khung nhìn, nhưng sẽ tạo ra sự khác biệt lớn đối với người dùng.

Khi trình duyệt dành cho thiết bị di động mới ra mắt, việc thiếu thẻ meta viewport sẽ khiến trang web nghĩ rằng nó có khoảng 980px không gian màn hình thực và hiển thị ở kích thước này. Với thẻ meta khung nhìn, nhà phát triển có thể xác định chiều rộng, trong đó phổ biến nhất là "device-width" (chiều rộng của thiết bị), giúp đặt kích thước màn hình thành kích thước của thiết bị. Bạn có thể tìm hiểu thêm về Kiến thức cơ bản về web.

Rick Byers mô tả khung nhìn ảo như sau: ý tưởng của khung nhìn ảo là chia khái niệm "khung nhìn" thành hai, "khung nhìn bố cục" (nơi các mục vị trí cố định được đính kèm) và "khung nhìn hình ảnh" (Những gì người dùng thực sự nhìn thấy).

Ví dụ cực kỳ đơn giản

Trang web videojs.com là một ví dụ điển hình vì thanh ứng dụng của trang web này được cố định ở trên cùng và có các đường liên kết ở cả bên trái và bên phải của thanh ứng dụng.

Hình ảnh bên dưới cho thấy nội dung bạn sẽ thấy nếu phóng to một trang web và cố gắng kéo sang trái và phải.

Các thiết bị ở trên cùng là Chrome M39 không có khung nhìn ảo và 3 thiết bị ở dưới cùng là Chrome M40 có khung nhìn ảo.

Kết xuất bị vỡ hình.
Kết xuất bị vỡ hình.

Trong Chrome M39, bạn sẽ thấy thanh ứng dụng sau khi phóng to, nhưng việc cuộn sang phải sẽ không cho phép bạn xem các đường liên kết ở bên phải của thanh, bạn sẽ chỉ thấy biểu trưng.

So sánh với Chrome M40 (có "chế độ xem đường viền ảo"), bạn sẽ thấy rằng "chế độ xem đường viền trực quan" cuộn mọi thứ bên trong "chế độ xem bố cục", cho phép bạn xem các đường liên kết ở bên phải.

Internet Explorer đã có hành vi này và những thay đổi này giúp chúng ta phù hợp hơn với chúng.

html

Thay đổi lớn duy nhất mà nhà phát triển phải đối mặt là trong M39, bạn có thể áp dụng overflow: hidden cho phần tử html và trang của bạn vẫn sẽ cuộn, trong M40, tính năng này không còn được hỗ trợ, trang sẽ không cuộn.

Thông tin chắc chắn hơn

Bạn muốn tìm hiểu thêm phải không?

Vậy thì, bạn có thể xem bản trình bày dưới đây.