[IOS 이슈] height:100vh이 먹통일 때 (feat.하단 URL 바)

반응형 작업을 하다보면 ios 사파리에서 이슈가 가장 많은 편이다.

 

그 중 하나가 height:100vh를 넣을 경우,

하단에 URL을 넣는 링크바 부분때문에 끝까지 스크롤을 해도 잘리는 현상이 생긴다.

 

 

CSS 

/*** ios only ***/
@supports (-webkit-touch-callout: none) {
    .gnb{height:calc(var(--vh, 1vh) * 100)}
}

 

ios 운영체제에만 먹히도록 위와 같은 supports 쿼리를 추가해주고

100vh대신 calc(var(--vh, 1vh) * 100)를 넣어준다.

 

 

JS

let vh = window.innerHeight * 0.01
document.documentElement.style.setProperty('--vh', `${vh}px`)

//리사이즈 할 경우
window.addEventListener('resize', () => { 
    let vh = window.innerHeight * 0.01
    document.documentElement.style.setProperty('--vh', `${vh}px`)
})

 

변수 vh에는 페이지가 로딩될 때 브라우저의 컨텐츠 영역 값의 1% 값이 계산되어 담기고

css 프로퍼티로 설정한 --vh에 계산된 값을 집어 넣어 오류를 해결한다.

 

혹시나 사용자가 브라우저 크기를 조절할 경우를 대비해 아래 resize 함수를 추가하면

좀 더 완벽하게 대비할 수 있다.

 

 

+ CSS 

/*** ios only ***/
@supports (-webkit-touch-callout: none) {
    @media(max-width: 1023px){
        .gnb{height:calc((var(--vh, 1vh) * 100) - 285px)}
    }
    @media(max-width: 767px){
        .gnb{height:calc((var(--vh, 1vh) * 100) - 226px)}
    }
    @media(max-width: 600px){
        .gnb{height:calc((var(--vh, 1vh) * 100) - 204px)}
    }
    @media(max-width: 480px){
        .gnb{height:calc((var(--vh, 1vh) * 100) - 116px)}
    }
}

 

반응형 작업 등 각 width마다 100vh에서 일정 값을 뺀 calc 계산식을 넣었다면

위와 같은 방식으로 추가하니 아이폰에서도 알맞은 크기로 들어갔다.😚😚