웹 앱에서 다양한 화면 지원

Android는 화면 크기와 픽셀 밀도가 다양한 기기에서 사용할 수 있으므로 이러한 요소를 고려하여 페이지의 크기를 적절하게 조정하시기 바랍니다. WebView는 DOM, CSS, 메타 태그를 지원합니다. 웹 콘텐츠를 적절하게 렌더링하는 데 도움이 됩니다.

Android 구동 기기에 웹페이지를 타겟팅할 때 고려해야 할 두 가지 주요 요소는 다음과 같습니다. 대상:

표시 영역
표시 영역은 웹페이지에 드로어블 영역을 제공하는 직사각형 영역입니다. 나 은 크기 및 초기 배율과 같은 여러 표시 영역 속성을 지정할 수 있습니다. 가장 중요한 것은 표시 영역 너비는 웹페이지의 너비에서 사용할 수 있는 가로 픽셀의 총 개수를 정의합니다. 사용 가능한 CSS 픽셀 수입니다.
화면 밀도
WebView 클래스 및 Android의 대부분의 웹브라우저는 CSS 픽셀 값을 변환합니다. 를 밀도 독립형 픽셀 값으로 변환하여 웹 페이지가 실제 프레임과 동일한 인지 가능한 크기로 중밀도 화면(약 160dpi) 하지만 그래픽이 동영상의 중요한 요소라면 설계할 때는 다른 밀도에서 발생하는 배율에 주의를 기울이세요. 예를 들어 320dpi 화면에서 너비 300px인 경우 크기가 확장됩니다. CSS당 실제 픽셀을 더 많이 사용합니다. Pixel 이로 인해 블러 및 모자이크 현상과 같은 아티팩트가 발생할 수 있습니다. 편의상 Android는 대부분의 작은 화면 밀도를 몇 가지 일반 카테고리(소형, 중형, 대형)로 분류합니다. 배우기 위해 화면 밀도에 대해 자세히 알아보려면 다양한 픽셀 밀도를 지원합니다.

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

표시 영역 속성 지정

표시 영역은 웹페이지가 그려지는 영역입니다. 표시 영역의 합계가 완전히 축소했을 때 화면 크기와 일치하고 표시 영역에 자체 픽셀이 있음 맞춤 측정기준을 만들 수 있습니다. 예를 들어 기기 화면에 표시 영역의 너비는 800픽셀입니다. 이를 통해 웹페이지에서 800픽셀로 디자인된 이미지는 표시 영역 스케일이 1.0일 때 화면에 완전히 표시됩니다.

대부분 Android(Chrome 포함)의 웹브라우저에서는 기본적으로 표시 영역을 큰 크기로 설정합니다. 이 _와이드 표시 영역 모드_의 너비는 약 980픽셀입니다. 또한 여러 브라우저에서는 전체 표시 영역 너비(_개요 모드_라고 함)를 표시할 수 있습니다.

<ph type="x-smartling-placeholder">

너비, 초기 확대/축소 등 웹페이지의 표시 영역 속성을 정의할 수 있습니다. 수준(문서의 <meta name="viewport" ...> 태그 사용) <head>입니다.

다음 구문은 지원되는 모든 표시 영역 속성과 값 유형을 보여줍니다. 다음과 같습니다.

<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 미디어 쿼리를 사용하여 다양한 화면 크기에 맞게 레이아웃을 유연하게 조정합니다.

<ph type="x-smartling-placeholder">

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.5배로 조정됩니다. 기본값입니다. 값이 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");
}