[IOS Safari] 아이폰 사파리에서 vh로 생기는 스크롤 해결하기

 

 

 

홈페이지 수정을하고 모바일에서 테스트 하다가 발견한것

100vh를 줬는데 PC에서 모바일 사이즈로 테스트 할땐 문제없이 잘 나오더니

모바일(사파리) 에서 켰더니 쓸데없는 스크롤이 생겨버린것!! 

 

 

검색하다보니 아이폰 사파리 vh때문인데 

아까운 내시간...

왜 매번 아이폰에서만 자꾸 이런일이 일어나지.......???

 

vh = viewheight

1vh는 현재 화면을 보고있는 디바이스

높이값의 100분의 1의이고, 

height를 100vh로 지정하면 현재 보이는 화면을 꽉 채운 값을 보여준다

 

 

스크롤이 생긴 이유

어쨋든 문제가 뭐냐면 

보통 vh라고 하면 상단바, 하단바를 제외한 화면자체 사이즈를 생각하는데,

모바일 사파리는 vh를 진짜 말그대로 화면 사이즈 

아래사진의 네모(상단바, 하단바) 영역까지 다 포함한 값을 표현하므로,

 

갑작스레 생긴 스크롤은 상단바, 하단바 때문에 생긴것이였다.

 

 

해결방법

body {
  min-height: 100vh;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
}

html {
  height: -webkit-fill-available;
}

근데 위와같이 쓰면 크롬에서

이상하게 나온다고 하는 경우도 있으니

/* iOS only */ 

@supports (-webkit-touch-callout: none) {
    height: -webkit-fill-available;
  }

위처럼 적용하면 된다

나는 혹시 몰라서 모바일 사이즈에 맞춘 미디어 쿼리에 넣어서 사용했다 : ) 

 

---

✔︎참고

https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

https://injeblog.tistory.com/110