티스토리 뷰
Supporting Different Screens in Web Apps
이 포스트를 작성할 당시에는 안드로이드 개발자 페이지의 해당 문서가 번역되어 있지 않았습니다.; 2020년 1월 16일
웹 어플리케이션의 차등 화면 지원
안드로이드 기기는 다양한 화면 크기와 픽셀 밀도를 갖고 있기 때문에, 우리는 항시 적절한 크기의 웹 페이지가 출력될 수 있도록 아래와 같은 요소들을 설정해야 합니다.
뷰포트the viewport
뷰포트는 웹 페이지의 출력 가능한 영역을 의미하는 가상의 사각 면입니다. 여기엔 화면 크기size 혹은 시작 화면비initial scale 등의 요소들이 포함됩니다. 가장 중요한 뷰포트 요소는 화면 너비width인데, 여기에는 해당 웹 페이지가 표현할 수 있는 가로 픽셀의 숫자를 정의합니다.
화면 밀도the screen density
웹뷰WebView 클래스와 대부분의 안드로이드 웹 브라우저는 CSS의 픽셀 수치를 각 기기의 화면 픽셀 밀도에 의존하지 않는 값으로 변환합니다. 그렇기 때문에 웹 페이지는 서로 다른 기기에서도 중간 수준의 픽셀 밀도(약 160dpi)를 지닌 화면으로 출력됩니다. 하지만 어떤 웹 페이지의 디자인에 있어 그래픽이 중요한 부분이라고 한다면, 우리는 이러한 화면비 변환을 주의하여 처리해야 합니다.
뷰포트 요소의 설정
뷰포트는 웹 페이지가 출력되는 영역을 의미합니다. 뷰포트의 전체 가시 영역이 화면 크기와 같아지더라도, 뷰포트는 뷰포트만의 픽셀 크기를 유지합니다. 예를 들어 기기의 화면 너비가 480 픽셀이라 하더라도 뷰포트의 너비는 800 픽셀이 될 수 있습니다. 이렇게 하면 800 픽셀을 기준으로 제작한 웹 페이지 디자인을 1.0 뷰포트 화면비viewport scale 설정을 통해 완전하게 볼 수 있습니다. 크롬을 포함한 대부분의 안드로이드 웹 브라우저는 "넓은 뷰포트 모드wide viewport mode"로 알려진 약 980px 너비의 뷰포트 크기를 기본값으로 설정하고 있습니다. 또한 많은 브라우저가 "조감 모드overview mode"라 불리우는 전체 줌 아웃 기능을 제공하고 있습니다.
비고: 만약 웹페이지가 웹뷰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"를 지원합니다. "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);
}
}다양한 화면 밀도에 대한 정보, 특히 이미지 처리 방법에 대한 정보를 원한다면 High DPI Images for Variable Pixel Densities를 참조하세요.
자바스크립트의 기기 화면 밀도 설정
안드로이드 브라우저와 웹뷰WebView는 DOM 요소―현재 기기의 화면 밀도를 질의하는 "window.devicePixelRatio"를 지원합니다. 해당 요소 값을 통해 현재 사용 중인 기기의 확대 비를 설정할 수 있습니다. 예를 들어 "window.devicePixelRatio"가 "1.0"인 경우 기기는 중밀도 화면으로 인식되어 기본값에서 확대 비 적용없이 화면이 출력됩니다. "1.5"의 경우에는 고밀도 화면을 지닌 기기로 인식되어 기본값에서 1.5배 확대된 화면이 출력됩니다. "0.75"의 경우에는 기본값 대비 0.75배 크기의 화면이 출력됩니다. 물론 안드로이드 브라우저 및 웹뷰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");
}
'Translation' 카테고리의 다른 글
| 왜 쉬브 라고 부르지? (0) | 2016.06.27 |
|---|