웹 앱에서 다양한 화면 지원

Android는 화면 크기와 픽셀 밀도가 다양한 기기에서 사용할 수 있으므로 웹 디자인에서 이러한 요인을 고려하여 페이지 크기가 적절하게 조절되도록 해야 합니다. WebView는 웹 콘텐츠를 적절하게 렌더링하는 데 도움이 되는 DOM, CSS, 메타 태그 기능을 지원합니다.

Android 지원 기기용 웹페이지를 타겟팅할 때는 다음과 같은 두 가지 주요 요소를 고려해야 합니다.

표시 영역
표시 영역은 웹페이지에 드로어블 영역을 제공하는 직사각형 영역입니다. 크기 및 초기 배율과 같은 여러 표시 영역 속성을 지정할 수 있습니다. 가장 중요한 것은 표시 영역 너비입니다. 표시 영역은 웹페이지의 관점에서 사용할 수 있는 총 가로 픽셀 수(사용 가능한 CSS 픽셀 수)입니다.
화면 밀도
Android의 WebView 클래스와 대부분의 웹브라우저는 CSS 픽셀 값을 밀도 독립형 픽셀 값으로 변환하므로 웹페이지는 중밀도 화면과 인식할 수 있는 크기(약 160dpi)로 표시됩니다. 그러나 그래픽이 웹 디자인의 중요한 요소인 경우 다양한 밀도에서 발생하는 배율에 주의하세요. 예를 들어 320dpi 화면에서 너비가 300px인 이미지는 확대되어 CSS 픽셀당 실제 픽셀을 더 많이 사용합니다. 이로 인해 블러 및 픽셀화와 같은 아티팩트가 발생할 수 있습니다. 편의상 Android에서는 대부분의 소형 화면 밀도를 소형, 중형, 대형과 같은 몇 가지 일반 카테고리로 축소합니다. 화면 밀도에 관한 자세한 내용은 다양한 픽셀 밀도 지원을 참고하세요.

다음 관련 리소스를 참고하세요.

표시 영역 속성 지정

표시 영역은 웹페이지가 그려지는 영역입니다. 표시 영역의 총 가시 영역은 완전히 축소했을 때의 화면 크기와 일치하지만 표시 영역에는 웹페이지에 사용할 수 있는 자체 픽셀 크기가 있습니다. 예를 들어 기기 화면의 실제 너비가 480픽셀일 수 있지만 표시 영역의 너비는 800픽셀일 수 있습니다. 따라서 표시 영역 배율이 1.0일 때 800픽셀 너비로 디자인된 웹페이지를 화면에 완전히 표시할 수 있습니다.

Chrome을 비롯한 Android의 대부분의 웹브라우저는 기본적으로 표시 영역을 큰 크기로 설정합니다. 이 _와이드 표시 영역 모드_의 너비는 약 980픽셀입니다. 또한 대부분의 브라우저는 _overview 모드_라고 하는 전체 표시 영역 너비를 표시하기 위해 기본적으로 최대한 축소됩니다.

문서 <head>에서 <meta name="viewport" ...> 태그를 사용하여 너비 및 초기 확대/축소 수준 같은 웹페이지의 표시 영역 속성을 정의할 수 있습니다.

다음 구문은 지원되는 모든 표시 영역 속성과 각 속성에서 허용되는 값 유형을 보여줍니다.

<meta name="viewport"
      content="
          height = [pixel_value | "device-height"] ,
          width = [pixel_value | "device-width"] ,
          initial-scale = float_value ,
          minimum-scale = float_value ,
          maximum-scale = float_value ,
          user-scalable = ["yes" | "no"]
          " />

예를 들어 다음 <meta> 태그는 표시 영역 너비가 기기 화면의 너비와 일치하고 확대/축소 기능이 사용 중지되도록 지정합니다.

<head>
    <title>Example</title>
    <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

휴대기기에 맞게 사이트를 최적화할 때는 일반적으로 모든 기기에 크기가 정확하게 맞도록 너비를 "device-width"로 설정한 다음 CSS 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 레이아웃을 유연하게 조정합니다.

CSS로 기기 밀도 타겟팅

WebView는 특정 화면 밀도에 맞는 스타일을 만들 수 있는 CSS 미디어 기능인 -webkit-device-pixel-ratio를 지원합니다. 이 기능에 적용하는 값은 0.75, 1 또는 1.5여야 하며, 각각 저밀도, 중밀도, 고밀도 화면 기기용 스타일이 있음을 나타냅니다.

각 밀도에 대해 별도의 스타일시트를 만들 수 있습니다.

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />

또는 다음과 같이 하나의 스타일시트에 다른 스타일을 지정합니다.

#header {
    background:url(medium-density-image.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /* CSS for high-density screens */
    #header {
        background:url(high-density-image.png);
    }
}

@media screen and (-webkit-device-pixel-ratio: 0.75) {
    /* CSS for low-density screens */
    #header {
        background:url(low-density-image.png);
    }
}

다양한 화면 밀도, 특히 이미지 처리에 관한 자세한 내용은 가변 픽셀 밀도의 높은 DPI 이미지를 참고하세요.

JavaScript로 타겟 기기 밀도

WebView는 현재 기기의 밀도를 쿼리할 수 있는 DOM 속성인 window.devicePixelRatio를 지원합니다. 이 속성의 값은 현재 기기에 사용되는 배율을 지정합니다. window.devicePixelRatio 값이 1.0이면 기기는 중밀도 기기로 간주되어 기본적으로 크기 조정이 적용되지 않습니다. 값이 1.5이면 기기는 고밀도 기기로 간주되어 기본적으로 1.5x로 페이지가 조정됩니다. 값이 0.75이면 기기는 저밀도 기기로 간주되어 페이지의 배율이 기본적으로 0.75배로 조정됩니다.

Android 브라우저 및 WebView이 적용하는 확장은 웹페이지의 타겟 밀도를 기반으로 합니다. 표시 영역 타겟 밀도 정의 섹션에 설명된 대로 기본 타겟은 중밀도이지만, 타겟을 변경하여 다른 화면 밀도에 맞게 웹페이지가 확장되는 방식에 영향을 줄 수 있습니다.

예를 들어 다음은 자바스크립트로 기기 밀도를 쿼리하는 방법입니다.

if (window.devicePixelRatio == 1.5) {
  alert("This is a high-density screen");
} else if (window.devicePixelRatio == 0.75) {
  alert("This is a low-density screen");
}