Как добиться, чтобы клавиатура safari в айфоне меняла размер страницы?

В Safari на iPhone это нормальная особенность: при появлении клавиатуры layout viewport и visual viewport ведут себя по-разному. На Android браузер часто реально уменьшает доступную высоту страницы, а iOS Safari может оставлять layout-viewport прежним и менять только visual viewport. Поэтому фиксированное нижнее меню, чат-форма или input bar начинают “ехать” не так, как ожидается.

Правильный подход — не рассчитывать только на 100vh. Для iOS нужно учитывать visualViewport, safe-area и новые единицы высоты. В CSS используйте 100dvh, где возможно:

.page {
  min-height: 100dvh;
}
 
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: env(safe-area-inset-bottom);
}

Но если нужно точно поднимать нижнюю панель над клавиатурой, добавьте обработку window.visualViewport:

const bar = document.querySelector('.bottom-bar');
 
function updateKeyboardOffset() {
  if (!window.visualViewport || !bar) return;
 
  const viewport = window.visualViewport;
  const offset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
  bar.style.transform = 'translateY(' + (-offset) + 'px)';
}
 
window.visualViewport?.addEventListener('resize', updateKeyboardOffset);
window.visualViewport?.addEventListener('scroll', updateKeyboardOffset);
window.addEventListener('orientationchange', updateKeyboardOffset);

Если используете React/Next, этот код нужно выполнять только на клиенте, после монтирования компонента. На сервере window отсутствует.

Ещё один важный момент: не ставьте форме или wrapper жёсткий height: 100vh без возможности прокрутки. На iOS это часто приводит к тому, что поле ввода оказывается под клавиатурой. Лучше делать основной контент скроллируемым, а нижний bar фиксированным и адаптируемым через visualViewport.

Итог: “заставить Safari менять размер страницы как Android” нельзя надёжно. Надёжное решение — верстать под модель iOS: 100dvh, safe-area, visualViewport и аккуратное позиционирование нижней панели при фокусе в input.