Что такое виртуальный видовой экран?

В Chrome M40 есть изменения в области просмотра, которые довольно незаметны, но должны иметь большое значение для пользователей.

Когда появились мобильные браузеры, отсутствие метатега области просмотра означало, что они заставляли веб-страницу думать, что у нее около 980 пикселей экрана, и отображались в этом размере. С помощью метатега области просмотра разработчики могут определить ширину, наиболее распространенной из которых является «ширина устройства», которая устанавливает размер экрана в соответствии с размером устройства. Вы можете узнать больше о основах веб-технологий .

Рик Байерс описывает виртуальное окно просмотра следующим образом: идея виртуального окна просмотра состоит в том, чтобы разделить понятие «окно просмотра» на два: «окно просмотра макета» (куда прикреплены элементы с фиксированным положением) и «визуальное окно просмотра». (Что на самом деле видят пользователи).

Супер простой пример

Веб-сайт videojs.com является хорошим примером, поскольку его панель приложений закреплена вверху и имеет ссылки как слева, так и справа от панели приложений.

На изображении ниже показано, что вы увидите, если увеличите масштаб сайта и попытаетесь панорамировать его влево и вправо.

Верхние устройства — Chrome M39, у которого нет виртуальной области просмотра, а три нижних — Chrome M40, у которой есть виртуальная область просмотра.

Пиксельный рендеринг.
Пиксельный рендеринг.

В Chrome M39 вы увидите панель приложений после увеличения масштаба, но прокрутка вправо не позволяет вам просматривать ссылки в правой части панели, вы увидите только логотип.

Сравните это с Chrome M40 (который имеет «виртуальную область просмотра»), и вы увидите, что «визуальная область просмотра» прокручивает все внутри «области просмотра макета», позволяя вам просматривать ссылки справа.

Internet Explorer уже имеет такое поведение, и эти изменения приближают нас к нему.

HTML

Единственный крупный разработчик, столкнувшийся с этим изменением, заключается в том, что в M39 вы можете применить overflow: скрыто к элементу html, и ваша страница все равно будет прокручиваться, в M40 это больше не поддерживается, страница просто не будет прокручиваться.

Более достоверная информация

Ты хочешь узнать больше, да?

Что ж, вы можете просмотреть слайды ниже.