![](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcNmR2N%2FbtrobGypOCj%2FZGbXZNKiXXwEpO6OCFcXe0%2Fimg.jpg)
모바일 브라우저에서 100vh 오류(직접해보기)
·
🐣codeLab
모바일 브라우저에서 100vh 오류 ⛔오류 module 클래스에 100vh 스타일 지정 후, 웹 브라우저 모바일 사이즈에서는 잘 보였으나, 모바일에서는 아래의 이미지처럼 100vh가 적용되지 않고 텍스트가 밀려나는 화면이 보였다. ⏺기준과 문제점. 아이폰기준. 14버전. 무조건 100vh!! 어느 기기든 화면 위아래와 맞춘다. 웹 브라우저에서는 100vh가 적용되나 모바일 크롬, 파이어폭스, 사파리가 적용이 안됨. 모바일 브라우저만 적용하기 위해서 아래 css 적용. @media only screen and (max-device-width: 모바일사이즈) { /* 아래 예제는 640px로 기준! */ /* 스마트폰만 일단 확인(tablet은 별도 필수) */ /* 웹브라우저에서 기기툴바전환할 경우에도 이..