🔍 모바일에서 뷰포트 하단에 요소를 고정하는 방법

안녕하세요 👋🏼

얼마 전까지만 해도 뷰포트 하단의 버튼 위치를 고정하는 작업이 있었습니다. 나는 Figma에서 뷰포트 하단에 붙일 매우 아름다운 버튼을 그리는 데 시간을 보냈습니다.

이 글을 쓰는 순간

.beautiful-button {
    position: fixed;
    bottom: 0;
}

그리고... 효과가 있었습니다!

나는 해결된 일에 만족했고 다른 일을 하러 갔다. 필드를 삽입하기 전까지는 모든 것이 괜찮았습니다. 클릭하면 키보드가 보이고 내 버튼이 사라졌습니다. 나는 너무 슬펐다.

그렇다면 문제는 안전한 영역에 있지 않을까요? 나는 이것을 시도한다

.beautiful-button {
    position: fixed;
    bottom: 0;
    bottom: calc(0 + env(safe-area-inset-bottom));
}

이것도 작동하지 않습니다.

나는 Safari가 Safari라고 생각하고 다음으로 연구를 진행했습니다.

가장 먼저 떠오른 해결책은 뷰포트의 높이를 계산하는 것이었습니다.

const viewportHeight = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);

그리고 이것은 작동하지 않습니다. 키보드가 있는 것과 없는 뷰포트 높이는 동일합니다.

인터넷 검색과 동료의 질문을 받은 후 Visual Viewport API( https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API )에 대해 알게 되었습니다.

뷰포트 크기를 가져오는 API가 있는 것으로 나타났습니다.
The visual viewport is the visual portion of a screen excluding on-screen keyboards, areas outside of a pinch-zoom area, or any other on-screen artifact that doesn't scale with the dimensions of a page. (MDN) .

그래서 내 솔루션은 이것을 사용하는 것입니다

window.visualViewport.height

window.visualViewport를 사용하여 이벤트를 수신할 수 있습니다.

window.visualViewport.addEventListener('resize', resizeHandler);
window.visualViewport.addEventListener('scroll', scrollHandler);

그리고 e.target를 사용하여 뷰포트의 매개변수를 가져옵니다.

그게 다야! 내 아름다운 단추가 이제 있어야 할 위치에 있습니다.

읽어주셔서 감사합니다 ❤️