이 블로그는 크로뮴, Gecko 환경에서 제일 잘 작동됩니다.
profile

글루미스토어

프론트엔드 개발 블로그입니다. Nextjs 14로 개발되었습니다.

아이폰 safe-area 대응하기 (아이폰 X 이상, 이하 구분하기)

my Blog!

아이폰 safe-area 대응하기 (아이폰 X 이상, 이하 구분하기)

조회수1179<b>[운영자]</b>영이





maxresdefault.webp






@supports (-webkit-touch-callout: none) {
  /*아이폰 전체*/
  padding-bottom: 30px;
  .padding-bottom {
    /* iPhone X 이하일 때 */
    @media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
    only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
      padding-bottom: calc(48px + #{$-h-btn-fixed} + #{$-spacing_y}) !important;
      padding-bottom: calc( 48px + #{$-h-btn-fixed} + #{$-spacing_y}) !important;
      /* iPhone X 이상일 때 */
      @media only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait),
      only screen and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
        padding-bottom: calc(constant(safe-area-inset-bottom) + 48px + #{$-h-btn-fixed}) !important;
        padding-bottom: calc(env(safe-area-inset-bottom) + 48px + #{$-h-btn-fixed}) !important;
      }
    }
  }
}



아이폰만, 게다가 아이폰 버전별로 css를 먹이는 key는 바로 

-webket-touch-callout: none과 

-webkit-min-device-pixel-ratio 두가지였다.


일단 테스트해보면 웬만한 아이폰에서는 정상적으로 잘먹힘.


앱이 아니라 웹에서는 safe area대응이 정말 불편하고 

일일이 수동으로 다 짜줘야해서 너무 어려웠던 기억이 난다.


아이폰은 X부터 홈버튼이 사라지고 home bar가 생겼는데, 마침 이 시기에 픽셀비율이 3이상이 되어서 

홈바가 있냐 없냐 구분은 픽셀비율이 2냐 3이냐로 따지면 됨.





댓글: 0