В Chrome M40 есть изменения в области просмотра, которые довольно незаметны, но должны иметь большое значение для пользователей.
Когда начались мобильные браузеры, отсутствие метагогрегации Viewport означало, что они заставят веб -страницу думать, что у нее было приблизительно 980px экрана недвижимости и рендеринга в этом размере. С помощью мета-тега Viewport разработчики могут определить ширину, наиболее распространенной из которых является «ширина устройства», которая устанавливает размер экрана на размер устройства. Вы можете узнать больше о основах веб-технологий .
То, как Рик Байерс описывает виртуальный порт просмотра, выглядит следующим образом: идея виртуального просмотра состоит в том, чтобы разделить понятие «Viewport» на два, «Mayout Viewport» (где прикреплены элементы с фиксированной позицией) и «визуальный вид просмотра» (то, что на самом деле видят пользователи).
Супер простой пример
Веб-сайт videojs.com является хорошим примером, поскольку его панель приложений закреплена вверху и имеет ссылки как слева, так и справа от панели приложений.
На изображении ниже показано, что вы увидите, если увеличите масштаб сайта и попытаетесь панорамировать его влево и вправо.
Верхние устройства — Chrome M39, у которого нет виртуальной области просмотра, а три нижних — Chrome M40, у которой есть виртуальная область просмотра.
В Chrome M39 вы увидите Appbar после увеличения, но прокрутка справа не позволяет вам просматривать ссылки на правой стороне бара, вы только когда -либо увидите логотип.
Сравните это с Chrome M40 (который имеет «виртуальный порт просмотра»), и вы увидите, что «визуальный вид просмотра» прокручивает все внутри «Mayout Viewport», что позволяет вам просматривать ссылки справа.
Internet Explorer уже имеет такое поведение, и эти изменения приближают нас к нему.
HTML
Единственный крупный разработчик, сталкивающийся с изменениями, которые связаны с этим, заключается в том, что в M39 вы можете применить переполнение: скрыто к элементу HTML, а ваша страница все равно будет прокручивать, в M40 это больше не поддерживается, страница просто не будет прокручивать.
Более достоверная информация
Ты хочешь узнать больше, да?
Что ж, вы можете просмотреть слайды ниже.