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

@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이냐로 따지면 됨.