Подготовьтесь к изменениям в поведении изменения размера области просмотра, которые появятся в Chrome на Android

Брамус

В ноябре, с выпуском Chrome 108, Chrome внесет некоторые изменения в поведение области просмотра макета при отображении экранной клавиатуры (OSK). Благодаря этому изменению Chrome на Android больше не будет изменять размер области просмотра макета, а вместо этого будет изменять размер только области визуального просмотра. Это приведет к тому, что поведение Chrome на Android будет соответствовать поведению Chrome на iOS и Safari на iOS.

Вот некоторая информация о том, что происходит, почему Chrome вносит это изменение и что вы можете сделать, чтобы подготовиться.

Окно просмотра макета и окно визуального просмотра

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

Визуализация области просмотра макета (синий контур) в браузере.
Визуализация области просмотра макета (синий контур) в браузере настольного компьютера.

При позиционировании элементов с использованием position: fixed они будут располагаться на этом видовом экране макета. Поскольку область просмотра макета остается на месте при прокрутке страницы вниз, то же самое будут делать и элементы, использующие position: fixed .

Визуализация области просмотра макета (синий контур) в мобильных браузерах, каждый из которых состоит из двух элементов, расположенных с использованием позиции: фиксированной (синие прямоугольники).
Визуализация области просмотра макета (синий контур) в мобильных браузерах, каждый из которых содержит два элемента, расположенных с использованием position: fixed (синие прямоугольники) . Показаны (слева направо) Safari на iPhone, Chrome на Android и Firefox на Android.

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

Визуализация визуального окна просмотра (оранжевый контур).
Визуализация визуального окна просмотра (оранжевый контур) .

При увеличении масштаба вы уменьшаете размер визуального видового экрана по отношению к видовому экрану макета.

Визуализация области визуального просмотра на странице с масштабированием. Обратите внимание, как визуальный видовой экран находится внутри видового экрана макета.
Визуализация области визуального просмотра (оранжевый контур) на странице с масштабированием. Обратите внимание, как визуальный видовой экран находится внутри видового экрана макета.

Поведение изменения размера видового экрана

При фокусировке на вводе или любой другой редактируемой области устройства — в основном устройства с сенсорным экраном — могут отображать экранную клавиатуру. Эта клавиатура, часто называемая виртуальной клавиатурой, позволяет пользователям вводить контент в редактируемую область.

При этом браузеры реагируют на различные области просмотра одним из следующих способов:

  • Измените размер только визуального видового экрана и сместите видовой экран макета.
  • Измените размер визуального окна просмотра и окна просмотра макета.
  • Не изменяйте размеры видового экрана макета или визуального окна просмотра, накладывая виртуальную клавиатуру поверх обоих.

Эти три поведения визуализируются следующим образом:

Визуализация всех трех упомянутых вариантов поведения одновременно.
Визуализация всех трех упомянутых вариантов поведения одновременно. Показаны Safari на iOS (слева) и Chrome на Android (в центре и справа).

В зависимости от того, какую комбинацию браузера и ОС использует посетитель, используется одно из вариантов поведения, находящееся вне вашего контроля.

Сопоставление различных вариантов поведения при изменении размера

В рамках исследования области просмотра ( часть Interop 2022) были исследованы различные аспекты, связанные с областью просмотра, для каждой основной комбинации браузера и ОС.

Одним из протестированных аспектов является поведение изменения размера при отображении OSK. Это привело к следующей классификации:

Группа первая

Браузеры, которые изменяют размер визуального окна просмотра, оставляя окно просмотра макета нетронутым.

  • Сафари на iOS
  • Сафари на iPadOS
  • Chrome в Chrome OS
  • Хром на iOS
  • Chrome на iPadOS
  • Край на iOS
  • Edge на iPadOS

Группа вторая

Браузеры, которые изменяют размеры как визуального окна просмотра, так и окна просмотра макета.

  • Хром на Андроиде
  • Фаерфокс на Андроиде
  • Край на Android
  • Фаерфокс на iOS

Группа третья

Браузеры, которые не изменяют размер ни одного из видовых экранов:

  • По умолчанию нет. В Chrome на Android вы можете включить это поведение с помощью API VirtualKeyboard.

Побочные эффекты каждого поведения

Эта разница в том, как изменяются размеры различных окон просмотра при отображении OSK, приводит к несовместимости макета и поведения веб-сайтов при изменении размеров.

В браузерах из группы 1 при отображении OSK:

  • Вычисленные значения для единиц измерения относительно области просмотра остаются прежними.
  • Элементы, которые были разработаны так, чтобы занимать все визуальное пространство, сохраняют свой размер.
  • Элементы, использующие position: fixed остаются на месте и могут быть скрыты OSK.

В браузерах из группы 2 при отображении OSK:

  • Вычисленные значения единиц измерения относительно области просмотра уменьшаются.
  • Элементы, которые были разработаны так, чтобы занимать все визуальное пространство, уменьшаются.
  • Элементы, использующие position: fixed могут оказаться в другом месте макета.
Визуализация побочных эффектов в обеих группах. Обратите внимание на разное положение элементов, использующих позицию: фиксированная (синие прямоугольники).
Визуализация побочных эффектов в обеих группах. Обратите внимание на разные позиции элементов, использующих position: fixed (синие прямоугольники) . Показаны Safari на iOS (слева) и Chrome на Android (в центре и справа).

Если вы не прибегнете к анализу User-Agent или не будете полагаться на обширные сценарии, вы не сможете узнать, какое поведение используется. Вы также не можете изменить поведение, поскольку оно определяется комбинацией браузера и ОС, с которой заходит пользователь.

Изменение поведения по умолчанию в Chrome 108

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

Это позволит привести поведение Chrome на Android в соответствие с поведением Chrome на iOS, iPadOS, Windows и CrOS, Safari на iOS и iPadOS и Edge на iOS, iPadOS и Windows.

Благодаря этому изменению авторы могут знать, какое поведение будет использоваться, независимо от того, на какой ОС работает Chrome. Кроме того, он позволяет использовать стабильные единицы относительно области просмотра: отображение или скрытие OSK не влияет на эти единицы.

Выбор другого поведения

Если вы хотите, чтобы на вашем веб-сайте использовалось поведение изменения размера до 108, не бойтесь. Также в Chrome 108 поставляется расширение метатега области просмотра .

С помощью клавиши interactive-widget вы можете указать Chrome, какой вариант изменения размера вы хотите.

Допустимые значения для interactive-widget :

  • resizes-visual : изменяет размер только визуального окна просмотра, но не окна просмотра макета.
  • resizes-content : изменение размера визуального окна просмотра и окна просмотра макета.
  • overlays-content : не изменять размер области просмотра.

Чтобы вернуться к «старому» поведению Chrome на Android, установите метатег области просмотра следующим образом:

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

Если вы не включили interactive-widget в метатег области просмотра, Chrome будет использовать поведение по умолчанию — resizes-visual .

Визуализируя, настройки оказывают такое влияние на различные области просмотра:

Визуальное сравнение всех трех значений в Chrome 108 на Android. Слева направо: изменение размера визуального элемента, изменение размера содержимого и наложение содержимого.
Визуальное сравнение всех трех значений в Chrome 108 на Android. Слева направо: resizes-visual , resizes-content и overlays-content .

Вы можете опробовать эффект каждого значения в своем браузере на этом демонстрационном веб-сайте .

Тестирование и обратная связь

Мы ожидаем некоторых незначительных отличий от существующих сайтов, но ожидаем, что они не будут блокироваться, поскольку Chrome 108 на Android теперь будет вести себя аналогично Safari на iOS. Таким образом, веб-сайты, которые нормально работают в Safari на iOS, также должны нормально работать и в Chrome 108 на Android.

Тем не менее, мы призываем авторов веб-сайтов активно тестировать свои веб-сайты в Chrome 108, который находится в стадии бета-тестирования с 27 октября 2022 года. Особенно обратите внимание на элементы, которые используют position: fixed и/или полагаются на единицы измерения, относящиеся к области просмотра .

Об отзывах можно сообщить на crbug.com . Обязательно включите в заголовок отчета «экранную клавиатуру».

Дополнительные ресурсы