화면 크기와 픽셀 밀도가 다양한 기기에서 Android를 사용할 수 있으므로 페이지가 항상 적절한 크기로 표시되도록 웹 디자인 시 이러한 요소를 고려해야 합니다. WebView는 DOM, CSS 및 메타 태그 기능을 지원하므로 웹 콘텐츠가 적절히 렌더링되도록 보장합니다.
Android 기기에 웹페이지를 타겟팅할 때 고려해야 하는 두 가지 주요 요소가 있습니다.
- 표시 영역
- 표시 영역은 웹페이지에 드로어블 영역을 제공하는 직사각형 영역입니다. 크기 및 초기 스케일과 같은 여러 표시 영역 속성을 지정할 수 있습니다. 가장 중요한 것은 웹페이지 측면에서 사용할 수 있는 총 가로 픽셀 수(사용 가능한 CSS 픽셀 수)를 정의하는 표시 영역 너비입니다.
- 화면 밀도
- Android의 대부분 웹브라우저와
WebView클래스는 CSS 픽셀 값을 밀도 독립형 픽셀 값으로 변환하기 때문에, 표시되는 웹페이지 크기가 중간 밀도 화면(약 160dpi)과 동일한 것으로 인지됩니다. 하지만 그래픽이 웹 디자인의 중요한 요소라면 다른 밀도에서 발생하는 크기 조정에 주의해야 합니다. 320dpi 화면에서 300px 너비 이미지는 CSS 픽셀당 실제 픽셀을 더 많이 사용하여 확대되고 이로 인해 블러, 모자이크 같은 아티팩트가 발생할 수 있기 때문입니다. 단순성을 위해 Android는 대부분의 작은 화면 밀도를 소수의 일반 범주(저, 중, 고)로 나눕니다. 화면 밀도에 관한 자세한 내용은 화면 밀도에 관한 학습을 참조하세요.
다음 관련 리소스를 참조하세요.
표시 영역 속성 지정
표시 영역은 웹페이지가 그려지는 영역입니다. 표시 영역의 전체 가시 영역은 화면을 완전히 확대했을 때의 화면 크기와 일치하지만 표시 영역마다 웹페이지에 사용 가능하게 만드는 고유 픽셀 크기가 있습니다. 예를 들어 기기 화면의 실제 너비가 480픽셀일 수 있으면 표시 영역의 너비는 800픽셀이 될 수 있습니다. 따라서 800픽셀 너비로 디자인된 웹페이지는 표시 영역 스케일이 1.0일 때 화면에 완전히 표시됩니다. Chrome을 포함하여 Android의 대부분 웹브라우저는 기본적으로 표시 영역을 큰 크기로 설정합니다(약 980픽셀 너비에서는 '와이드 표시 영역 모드'라고 함). 또한 기본적으로 대다수 브라우저는 전체 표시 영역 너비('개요 모드'라고 함)를 표시하기 위해 가능한 한 축소됩니다.
참고: 페이지가 WebView에서 렌더링되면 기본적으로 와이드 표시 영역 모드(페이지가 전체 확대된 상태로 나타남)를 사용하지 않습니다. setUseWideViewPort()를 사용하여 와이드 표시 영역 모드를 사용 설정할 수 있습니다.
문서 <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 CSS 미디어 기능을 지원합니다. 이 기능에 적용되는 값은 각각 저밀도, 중밀도 또는 고밀도 화면의 기기를 대상으로 한 스타일임을 나타내는 '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 이미지를 참조하세요.
자바스크립트로 기기 밀도 타겟팅
WebView는 현재 기기의 밀도를 쿼리할 수 있는 DOM 속성, 즉 window.devicePixelRatio DOM 속성을 지원합니다. 이 속성의 값은 현재 기기에 사용되는 크기 조정 계수를 지정합니다. 예를 들어 window.devicePixelRatio 값이 '1.0'이면 기기가 중간 밀도 기기로 간주되고 기본적으로 크기 조정이 적용되지 않습니다. 값이 '1.5'이면 기기가 고밀도 기기로 간주되고 페이지가 기본적으로 1.5x 조정됩니다. 값이 '0.75'이면 기기는 저밀도 기기로 간주되고 페이지는 기본적으로 0.75x 조정됩니다. 물론 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");
}