PhoneGap + Windows Phone 8: HTML5 뷰포트 메타 태그와 화면 크기 조정 문제 해결 방법

PhoneGap으로 개발한 앱을 Windows Phone 8에서 실행할 때 HTML5 뷰포트(viewport) 메타 태그가 제대로 적용되지 않거나 화면 크기 조정(scaling)이 의도한 대로 동작하지 않는 경우가 종종 있습니다.

문제의 원인

이런 현상이 발생한다면 대부분 CSS가 올바르게 작성되지 않았기 때문입니다. Windows Phone 8의 Internet Explorer는 표준 뷰포트 메타 태그를 완전하게 지원하지 않으므로, 별도의 CSS 설정으로 이를 보완해 주어야 합니다.

해결 방법 1: 전체 선택자에 줌 관련 속성 추가

스타일시트에 아래 코드를 추가하면 문제를 해결할 수 있습니다.

* {
    zoom: 1;
    -ms-content-zooming: none;
}

zoom: 1;은 모든 요소의 배율을 100%로 고정하고, -ms-content-zooming: none;은 사용자가 콘텐츠를 임의로 확대하거나 축소하는 것을 차단하여 레이아웃이 흔들리지 않도록 합니다.

해결 방법 2: @viewport 규칙 활용

코드에 따라서는 다음과 같이 @viewport 규칙을 사용하는 방식도 효과적입니다.

@viewport
{
    width: 320px;
}
@-ms-viewport {
    width: 320px;
    zoom-user: fixed;
    max-zoom: 1;
    min-zoom: 1;
}

표준 @viewport 규칙과 Microsoft 전용 접두사인 @-ms-viewport를 함께 선언하면, Windows Phone 8 환경에서도 원하는 너비(320px)와 고정된 배율(min/max-zoom: 1)이 안정적으로 적용됩니다.

정리

Windows Phone 8에서 뷰포트 관련 문제가 생긴다면 먼저 위 두 가지 CSS 설정을 시도해 보세요. 대부분의 크기 조정 문제는 간단한 스타일시트 수정만으로 해결할 수 있습니다.