최근들어서 iOS safe area 설정의 변화가 있었음
특정 버전을 확정지을 순 없지만
안드로이드OS 최신버전에서도 safe area 속성이 적용되는 걸 알게 되었음.
기존
아래와 같이 safe-area 값을 넣게되면
padding-bottom 값이 안드로이드OS에서는 13px
iOS에서는 0으로 적용되었음
padding: 16px 15px 13px 15px;
padding: 16px 15px env(safe-area-inset-bottom) 15px;
padding: 16px 15px constant(safe-area-inset-bottom) 15px;
변경
@supports (-webkit-touch-callout)을 인식해서
iOS에서만 적용되도록 수정함
padding: 16px 15px 13px 15px;
@supports (-webkit-touch-callout: none) {
padding: 16px 15px env(safe-area-inset-bottom) 15px;
padding: 16px 15px constant(safe-area-inset-bottom) 15px;
}