모바일/크롬에서 첫 접속시 100vh 관련 문제
본문
.main-intro {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
background: #fff;
opacity: 1;
}
.main-intro > div {
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
css가 이런식이라고 할 때 .main-intro > div는 정가운데 있어야합니다.
다만 크롬의경우 살짝 아래쪽에 위치하다가 클릭 혹은 스크롤하면 다시 가운데로 돌아옵니다..
인트로 제작중인데.. 크롬에서만 저러니 방법이없네요 ㅠ
흔히 스크립트로 제어하는 방법 > height: calc(var(--vh, 1vh) * 100);이것도 안먹히고있는 상황입니다.
해결하셨던분 도움 부탁드려요 ㅠ
답변 1
인트로라면 fixed 로 하세요.
크롬 뿐만 아니라 비슷한 디바이스의 경우 모바일에서
아래로 스와이프 할경우 주소창이 작아지고 또 위로 스와이프 할경우 주소창이 생깁니다.
답변을 작성하시기 전에 로그인 해주세요.