마치영화처럼

웹표준/HTML2012/02/06 13:36

Viewport

viewport 속성

viewport 비활성화

크기지정

initial-scale : 초기 확대/축소 배율
minimum-scale : 최소 축소 배율 N(0~10, default 0.25)
maximum-scale : 최대 확대 배율 N(0~10, default 1.6)
user-scalable : 확대/축소 가능 여부 yes / no(default yes)

화면의 DPI
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width" />

device-dpi : 대상 DPI로 장치의 기본 DPI를 사용하십시오. 기본 스케일링이 발생하지 마십시오.
high-dpi : 대상 DPI로 hdpi를 사용합니다. 중간과 낮은 밀도 화면 적절한 다운 스케일
medium-dpi : 대상 DPI로 mdpi를 사용합니다. 고밀도 스크린 최대 규모 저밀도 화면 아래로 확장. 이것이 기본 대상 밀도이다.
low-dpi : 대상 DPI로 ldpi를 사용합니다. 중간 및 높은 밀도 화면 적절한 최대 규모.
<value> : 대상 DPI로 사용하는 DPI 값을 지정합니다. 값 범위 70-400 내에 있어야합니다.

CSS타겟팅
<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" />

또는

#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);
    }
}

자바스크립트 타겟팅

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

원문 : http://docs.androidside.com/guide/webapps/targeting.html#ViewportSize

출저 : http://eyesi.me/110121678379