아이폰X 이상 safe area 처리하기,

현재는 하이브리드앱 프로젝트를 진행중이다.

정말 오랜만에 3시간정도 머리를 굴렸던것 같다. 

 

문제는 iphone x 이상부터 나오는 safe area 때문인데, 

고객이 상단 safe area도 화면과 연결되어 거부감이없는 느낌을 받고 싶다고 한다. 

그래서 먼저 env와 constant를 사용해서 잡으려고 하였으나, 

무슨 연유인지 잡히질 않아서, 

고민을 하게됐다. 

이유를 찾아서 적용해야 하지만, 

앱단에서 safe area를 해제 해 줄수 있따는 말을 하기에,

그렇다면 '내가 더편하지' 하고 그렇게 해달라고 했다. 

순간 알고리즘이 떠올랐고 적용할수 있을것이라 판단하여, 그렇게 진행했다.

 

방법은 일단 네이티브에서 safe area를 해제 한다.

그리고 난 일반 fixed 헤더를 내비둔 상태에서

iPhone X 이상일 경우만 체크해서 css를 변경하는 script를 제작하면 되는것이었다.

먼저 이후에 나올 기종의 iPhone도 생각해야 했기에, 기기해상도를 이용하기로 했다. 

소스는 이렇다.

 

$(function(){

safeAreaCheck();

function safeAreaCheck(){

var winWd = $(window).width();

var winHt = $(window).height();

if(navigator.userAgent.indexOf("iPhone") >= 0)

if(winWd == 320 && winHt == 480) return false;

if(winWd == 320 && winHt ==568) return false;

iif(winWd == 375 && winHt == 667) return false;

iif(winWd == 414 && winHt == 736) return false;

setCss();

}

function setCss(){

//Todo 

}

});

 

이렇게 했더니, 잘 해결되었다.

이렇게 iPhone X 이상버전만 골라낼수 잇었다.