[Cordova] 디버깅(vh 단위 적용문제)

1. vh 단위

CSS의 vh 단위는 Viewport의 높이값을 기준으로 1%의 높이를 나타낸다. margin-top이나 margin-bottom의 % 단위의 기준은 상위요소의 높이가 아니라 너비이므로 상위요소의 높이를 기준으로 설계시에 vh 단위가 유용하다.

 

2. 가상 키보드

모바일 디바이스의 경우에는 문자입력시 가상 키보드가 나타나는데, 가상키보드는 뷰포트의 사이즈를 줄이므로 vh 단위를 사용한 경우에 원치 않는 레이아웃이 나타날 수 있다.

 

3. 모바일 브라우저에서의 해법

가상 키보드에 의해서 뷰포트가 줄어 드는것을 방지하기 위해서 meta 태그에 뷰포트 설정값을 고정값으로 세팅하면 된다.

<div id="wrap"></div>

<style>
#wrap {
    width: 100vw;
    height: 100vh;
}
</style>

<script>
    let viewportParams2 = ", initial-scale=1.0, user-scalable=no";
    let metaViewport = document.querySelector("meta[name=viewport]");
    let width = $(window).width();
    let height = $(window).height();
    let viewportParams = "width=" + width + ", height=" + height + viewportParams2;

    metaViewport.setAttribute("content", viewportParams);
</script>

 

4. Cordova에서의 해법

Cordova는 meta 태그에 뷰포트 설정값을 인식하지 못하므로, vh 단위를 사용하지 않고 1vh에 해당하는 픽셀값을 CSS에 적용하여 해결한다. 아래 코드와 같이 $(window).height() 값을 이용하여 1vh에 해당하는 픽셀값을 계산하고, CSS에 변수와 계산식을 적용하면 해결 가능하다.

<div id="wrap"></div>

<style>
#wrap {
    width: 100vw;
    height: calc(var(--varh, 1vh) * 100);
}
</style>

<script>
    let height = $(window).height();
    document.documentElement.style.setProperty('--varh', `${height / 100}px`);
</script>

 

5. Cordova의 config.xml 설정

https://cordova.apache.org/docs/en/latest/config_ref/index.html#preference

아래의 코드를 config.xml에 추가하면 Orientation을 portrait으로 고정할 수 있다.

<preference name="Orientation" value="portrait" />