다른 브라우저에서는 다 괜찮은데 사파리에서 볼 때만 UI가 잘리는 현상이 나타나서 찾아보면서 해결했다.
모바일 Safari에서 100vh가 주소 표시줄이나 하단 바를 제외한 실제 화면 높이를 반영하지 않아 UI가 잘리는 문제가 발생하여서 그런것 같았다.
해결해 주기위해서 뷰포트 높이 설정을 해주었다.
먼저 main.tsx에 뷰포트 높이 설정함수와 처음 로딩과 창 크기 변경 시 --vh 설정을 해주는 코드를 작성해주었다.
// 뷰포트 높이 설정 함수
function setViewportHeight() {
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', ${vh}px);
}
// 처음 로딩과 창 크기 변경 시 --vh 설정
setViewportHeight();
window.addEventListener('resize', setViewportHeight);
TypeScript
복사
위의 코드는 브라우저의 뷰포트 높이를 정확히 계산해서 CSS 변수 --vh에 저장하는 함수이다. 모바일 브라우저에서 주소창과 같은 UI요소의 영향을 제외하고 안정적인 화면 높이를 유지하기 위해 사용된다.
resize 이벤트는 브라우저 창 크기가 변경될 때 호출된다. 예를 들어, 모바일 기기에서 화면을 회정하거나 주소창이 사라질 때 호출된다.
그리고 index.css에서 html의 높이를 100vh가 아니라
height: calc(var(--vh, 1vh) * 100)
TypeScript
복사
로 변경해줬다. 그랬더니 이제 사파리에서도 UI잘림이 없이 잘 보인다!!!!!!