모바일에서 키보드가 올라오면서 입력창이나 하단 고정 버튼을 가린다면, viewport 메타의 interactive-widget 값과 visualViewport API로 키보드 높이만큼 화면을 맞춰 주면 대부분 해결됩니다.
특히 화면 아래에 붙여 둔 상담 신청 폼이나 채팅형 입력창에서 자주 생기는 문제입니다.

1. 안드로이드는 interactive-widget으로 동작 고르기

viewport 메타에 interactive-widget 값을 넣으면 키보드가 올라올 때 페이지를 어떻게 다룰지 정할 수 있습니다. resizes-content로 두면 레이아웃 화면 자체가 키보드만큼 줄어들어, 하단 고정 버튼이 키보드 바로 위로 올라옵니다.

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

다만 이 값은 아이폰 사파리에서는 아직 무시됩니다. 그래서 아이폰까지 맞추려면 다음 방법을 같이 씁니다.

2. 아이폰까지 맞추려면 visualViewport로 높이 계산

window.visualViewport는 지금 눈에 보이는 영역의 높이와 위치를 알려 줍니다. 전체 창 높이에서 이 값을 빼면 대략 키보드가 차지한 높이가 나오고, 이걸 CSS 변수로 넘겨 하단 버튼을 그만큼 올리면 됩니다.

// 키보드 높이를 CSS 변수로 전달
const vv = window.visualViewport;
function syncKeyboard() {
  const gap = window.innerHeight
    - vv.height - vv.offsetTop;
  document.documentElement.style
    .setProperty('--kb', Math.max(0, gap) + 'px');
}
if (vv) {
  vv.addEventListener('resize', syncKeyboard);
  vv.addEventListener('scroll', syncKeyboard);
}

/* 하단 고정 버튼 */
.fixed-cta {
  position: fixed;
  bottom: 0;
  transform: translateY(calc(var(--kb, 0px) * -1));
}

1번 설정으로 레이아웃 화면이 이미 줄어든 안드로이드에서는 계산값이 0 근처로 나오기 때문에 두 방법을 같이 써도 버튼이 두 번 올라가지 않습니다.

3. 적용 후 꼭 확인할 것

• 실제 아이폰과 안드로이드 기기에서 입력창을 눌러 확인하기 (PC 개발자 도구의 모바일 모드에는 키보드가 없습니다)
• 입력창이 키보드 바로 위에 보이는지, 하단 버튼이 입력창을 다시 가리지 않는지
• 키보드를 내린 뒤 버튼이 원래 자리로 돌아오는지
• 카카오톡·네이버 앱 안에서 열었을 때도 같은지

광고나 카톡 공유로 들어오는 방문자는 앱 안 브라우저로 보는 경우가 많으니 마지막 항목도 꼭 확인해 보세요.