safe-area

[jihunhong]

모달을 모바일 환경에서 open했을때, 모바일 화면 전체를 커버하는 상태였는데
ios 에서만 css가 깨지는 상황이 발생 확인해보니 safe-area 문제였다.

알고는 있지만 애매모호한 점도 있어서 다시 정리

viewport meta태그

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

viewport 메타태그를 를 수정하는 의미를 잘못 이해하고 있었다.

이걸 이용해야 env를 이용할 수 있다는 의미로 생각했는데 그게 아니라
아래 사진 처럼 safe-area를 제외한 영역까지 웹페이지의 ui로 설정하는 것이었다.

https://velog.io/@leejpsd/CSS-%EC%95%84%EC%9D%B4%ED%8F%B0-%EC%95%88%EC%A0%84%EC%98%81%EC%97%ADsafe-area-%EB%8C%80%EC%9D%91-%EC%95%84%EC%9D%B4%ED%8F%B0-%EB%85%B8%EC%B9%98-%EB%8C%80%EC%9D%91

constant()와 env()

constant()를 이용하기도 했었는데, 이건 ios 11부터 deprecated 되어서 env()를 이용하자.
ios 11 대응을 위해서는 둘다 사용한다.

header {

  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);

  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);

}

env()의 fallback

env값을 이용할때 두번째 인자로 falllback을 명시하면 safe-area를 고려하는 동시에 다른 환경에서의 값도 지정할 수 있다.

div {
  padding-top: env(safe-area-inset-top, 20px);
}

env를 모든 브라우저를 지원하는것은 아니지만, fallback값은 잘 적용되서 이를 이용하는게 좋을것 같다

추가로 safari에만 적용하는 css를 작성하고 싶을때 이용하는 방법을 찾아봤는데
마땅히 이거다 하는 방법은 딱히 없는것 같고 media query를 이용한 css hack을 사용하는것 같다
js를 이용해서 같이 적용하는게 있긴한데 굳이 싶음

@media not all and (min-resolution: 0.001dpcm) {
  @media {
    body {
      background-color: lightblue;
    }
  }
}