[App]Safe Area :아이폰X 디자인 이슈

IOS Safe Area

마무리 되어간다고 생각했던 APP에서 알 수 없는 오류가 생겼다.

아이폰X 부터 적용된 레이아웃 때문에 생기는 문제다.

footer 밑으로 컨텐츠가 보이고 홈버튼이 보인다.

header도 멀쩡해 보이지만 실제로 보면 같은 문제로 레이아웃이 틀어져 버린다.

해결법 

1. viewport-fit=cover 추가

<!-- 기존 뷰포트 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes,">
<!-- 수정된 뷰포트-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes, viewport-fit=cover">

2. CSS 추가

/* 코딩한 body에 추가 */
body { 
padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
padding-top: env(safe-area-inset-top); /* iOS 11.2 */ }

/* 코딩한 footer에 추가 */
.footer { 
 padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */
 padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ }

참고 : https://blog.phonegap.com/displaying-a-phonegap-app-correctly-on-the-iphone-x-c4a85664c493

참고 : https://webkit.org/blog/7929/designing-websites-for-iphone-x/