В ноябре, с выпуском 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 это визуальное окно просмотра имеет такой же размер, как и окно просмотра макета.
При увеличении масштаба вы уменьшаете размер визуального видового экрана по отношению к видовому экрану макета.
Поведение изменения размера видового экрана
При фокусировке на вводе или любой другой редактируемой области устройства (в основном устройства с сенсорным экраном) могут отображать экранную клавиатуру. Эта клавиатура, часто называемая виртуальной клавиатурой, позволяет пользователям вводить контент в редактируемую область.
При этом браузеры реагируют на различные области просмотра одним из следующих способов:
- Измените размер только визуального видового экрана и сместите видовой экран макета.
- Измените размер визуального окна просмотра и окна просмотра макета.
- Не изменяйте размеры видового экрана макета или визуального окна просмотра, накладывая виртуальную клавиатуру поверх обоих.
Эти три поведения визуализируются следующим образом:
В зависимости от того, какую комбинацию браузера и ОС использует посетитель, используется одно из вариантов поведения, находящееся вне вашего контроля.
Сопоставление различных вариантов поведения при изменении размера
В рамках исследования Viewport Investigation Effort (часть 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 .
Визуализируя, настройки оказывают такое влияние на различные области просмотра:
resizes-visual , resizes-content и overlays-content .Вы можете опробовать эффект каждого значения в своем браузере на этом демонстрационном веб-сайте .
Тестирование и обратная связь
Мы ожидаем некоторых незначительных отличий от существующих сайтов, но ожидаем, что они не будут блокироваться, поскольку Chrome 108 на Android теперь будет вести себя аналогично Safari на iOS. Таким образом, веб-сайты, которые нормально работают в Safari на iOS, также должны нормально работать и в Chrome 108 на Android.
Тем не менее, мы призываем авторов веб-сайтов активно тестировать свои веб-сайты в Chrome 108, который находится в стадии бета-тестирования с 27 октября 2022 года. Особое внимание уделяется элементам, которые используют position: fixed и/или полагаются на единицы измерения, относящиеся к области просмотра .
Об отзывах можно сообщить на crbug.com . Обязательно включите в заголовок отчета «экранную клавиатуру».