모바일 화면 PC로 시뮬레이션하기 & ios 100vh 오류 수정

CSS로 화면에 딱 맞게 하려고 100vh를 사용했는데,

모바일(IOS)에서 확인해보니 하단바 밑으로 스크롤이 생기는 현상이 생겨버렸다...;;

너무 당황스러워 여러가지 서치해보니

하단바까지 사이즈를 잡아버려서 이런 현상이 일어나는것 같다.

 

이 현상을 수정할 방법으로 CSS를 수정하는 것으로 해보았다.

 

방법1

 

1. 뷰포트를 사용할 엘리먼트에 CSS 추가

(대부분 body나 특정 엘리먼트 선택)

.test_elment{
	height: 100vh;
	height: -webkit-fill-available;
    	height: fill-available;
}

 

 

2. ios용 미디어쿼리 추가

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

 

---------------------------

방법2

 

1. 해당 js에 스크립트 추가

 

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

window.addEventListener("resize", () => {
  console.log("resize");
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty("--vh", `${vh}px`);
});

 

2. 해당 css에 내용 추가

:root {
  --vh: 100%;
}

  .testElment { 
  height: 100vh;
  /* * 뒤는 해당 vh 숫자를 입력해주면됨 */
  height: calc(var(--vh, 1vh) * 100);
  }
  
.testElment { 
  height: 15vh;
  height: calc(var(--vh, 1vh) * 15);
  }

출처 : https://yohanpro.com/posts/css/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A3%BC%EC%86%8C%EC%B0%BD-%ED%81%AC%EA%B8%B0-%EC%A0%9C%EC%96%B4

모바일에서 브라우저 주소창을 고려한 css height 설정방법 - Yohan's Developer Diary

 

 

 

그리고 PC에서 모바일 브라우저에서 어떻게 나오는지

테스트 하고싶어 여러가지 서치해보니

구글 확장프로그램에서 Mobile simulator - responsive testing tool 을 설치하여

사용하면 간편하게 모바일 버전을 사용해 볼 수 있다.

꿀팁!!

 

출처 : 구글 웹스토어 Mobile simulator - responsive testing tool