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