Khung nhìn ảo là gì?

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

Khi trình duyệt dành cho thiết bị di động mới bắt đầu, việc thiếu thẻ meta viewport đồng nghĩa với việc các trình duyệt này sẽ khiến trang web nghĩ rằng trang có không gian màn hình khoảng 980px 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 đó chiều rộng phổ biến nhất là "device-width" (chiều rộng thiết bị) sẽ đặt kích thước màn hình tương ứng với kích thước của thiết bị. Bạn có thể tìm hiểu thêm về Các nguyên tắc cơ bản về web.

Cách 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 đính kèm các mục vị trí cố định) và "khung nhìn trực quan" (thực tế người dùng nhìn thấy gì).

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 thanh ứng dụng được đặt 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 dưới đây cho thấy những gì bạn sẽ thấy nếu bạn phóng to một trang web và thử di chuyển sang trái và phải.

Các thiết bị hàng đầu 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 pixel.
Kết xuất pixel.

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

So sánh phiên bản này với Chrome M40 (có "khung nhìn ảo") và bạn sẽ thấy rằng "khung nhìn trực quan" cuộn mọi thứ bên trong "khung nhìn 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 tôi phù hợp hơn với các hành vi này.

html

Thay đổi lớn duy nhất dành cho nhà phát triển đi kèm với thay đổi này là trong M39, bạn có thể áp dụng overflow: ẩn vào phần tử html và trang của bạn vẫn sẽ cuộn, trong M40, điều này không còn được hỗ trợ, trang sẽ chỉ không cuộn.

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

Bạn muốn tìm hiểu thêm hả?

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