해상도가 큰 기기에서는 이미지 사이즈를 크게 해 줘도 되지만
모바일기기에서는 해상도가 큰 이미지는 화면 밖으로 나가게 되어 아주 보기 흉하게 됩니다.
이런 현상에 대응하기 위한 방법이 있습니다.
이미지를 640사이즈에 맞추어서 제작하고
2배 축소하면 아이폰사이즈가 되고
1.5배 축소하면 안드로이드 사이즈가 되도록 하는 것입니다.
이것은 아주 멋진 방법이 될 것입니다.
다음의 코드를 실행해 봅시다.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>change image size</title>
<style type="text/css">
/*pc, ipad등 고해상도*/
#imgbox
{
width:640px;
height:960px;
-webkit-background-size:640px 960px;
background:url(http://placehold.it/640x960) no-repeat;
}
/* 아이폰용 */
@media screen and (-webkit-device-pixel-ratio: 2){
#imgbox{background: url("http://placehold.it/320x480");}
}
/* 안드로이드폰용 */
@media screen and (-webkit-device-pixel-ratio: 1.5){
#imgbox{background: url("http://placehold.it/480x720");}
}
</style>
</head>
<body>
<div id="imgbox">
이미지
</div>
</body>
</html>
이렇게 하면 pc에서는 640x960이미지가 화면에 뜨는데
아이폰에서는 320x480이미지가 뜨고
안드로이드 폰에서는 480x720이미지가 뜹니다.
'WEB_TECH > 모바일웹' 카테고리의 다른 글
| 사이트의 모바일 친화성을 알려면 어떻게 해야 할까요. (0) | 2015.06.04 |
|---|---|
| 모바일 웹 기본페이지 (2) | 2013.06.25 |
| 모바일웹 브라우저 주소창 감주기 (0) | 2013.06.25 |
| 모바일웹 meta 태그를 사용한 페이지 크기 제어 (0) | 2013.06.25 |
| 웹앱 페이지 만드는 방법 (0) | 2012.08.09 |