달력

3

« 2024/3 »

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
2012. 11. 27. 11:52

모바일 디스플레이 화면 변경 I.lib()/I.lib(Android)2012. 11. 27. 11:52

.. .. ..

[펌] : http://android.elex.pe.kr/dev-guide/android-web-app/mobile-web-page

 

 

모바일 장치의 화면은 데스크탑의 모니터보다 작습니다.또한 화면의 크기나 해상도도 다양하기 때문에 브라우저에게 적당한 화면 크기를 알려줘야 합니다.이를 위해 HTML문서의 <head>요소안에 다음과 같이 <meta>요소를 한 줄 추가해야 합니다.

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

<meta>요소의 name속성값은 “viewport”이며content속성 값은 다양하게 설정할 수 있습니다.

<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] ,
target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
" />

heightwidth는 문서 작성시에 가정한 픽셀 크기를 지정하거나device-height또는 device-width를 지정해서 장치의 전체 크기를 사용할 수 있습니다.

문서 작성시에 가로폭을 320px로 가정하고 작업했다면 다음과 같은 메타데이터를 사용할 수 있습니다.

<meta name="viewport" content="width=320" />

문서가 가변적인 너비로 작성되었다면 다음과 같은 메타데이터를 사용해서 장치의 크기에 맞는 폭을 갖도록 지정할 수 있습니다.

<meta name="viewport" content="width=device-width" />

initial-scale, minimum-scale, maximun-scale, user-scalable을 지정해서 화면의 줌(zoom)을 지정할 수 있습니다.initial-scale은 페이지 로딩시의 크기이고,minimum-scale은 최소 크기,maximun-scale은 최대 크기이며,각각의 값은 화면 크기의 비율을 부동소수값으로 지정합니다.user-scalableyes또는 no를 지정해서 사용자가 화면 크기를 확대/축소할 수 있는지를 지정합니다.

화면의 픽셀 밀도를 지정하려면 원하는 dpi값을 지정하거나 device-dpi, high-dpi, medium-dpi, low-dpi 등의 값을 지정하면 됩니다.

화면 픽셀 밀도에 따라 별도의CSS파일을 구성하려면 <link>media속성을 사용해서 다음과 같이 할 수 있습니다.

<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" />
<link
rel="stylesheet"
media="screen and (-webkit-device-pixel-ratio: 0.75)"
href="ldpi.css" />

자바스크립트에서는 다음과 같은 방식으로 처리를 할 수 있습니다.

if (window.devicePixelRatio == 1.5) {
alert("
고밀도 화면입니다.");
} else if (window.devicePixelRatio == 0.75) {
alert("
저밀도 화면입니다.");
}

CSS를 통해 레이아웃의 크기를 지정할 때에는 가급적이면 절대적인 값(px)보다는 상대적인 값(%)을 사용하는 것이 좋습니다.다음과 같이 장치에 독립적인 메타 데이터를 사용하고 각각의 해상도에 따라 달라져야 하는 크기 문제는 CSS를 밀도 별로 구분하여 적용하는 것이 바람직합니다.

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />
.
:
Posted by .07274.