모바일/크롬에서 첫 접속시 100vh 관련 문제

모바일/크롬에서 첫 접속시 100vh 관련 문제

QA

모바일/크롬에서 첫 접속시 100vh 관련 문제

답변 1

본문

.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 로 하세요.

크롬 뿐만 아니라 비슷한 디바이스의 경우 모바일에서

아래로 스와이프 할경우 주소창이 작아지고 또 위로 스와이프 할경우 주소창이 생깁니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 1
© SIRSOFT
현재 페이지 제일 처음으로