IPhone4에서 웹페이지를 보다보면, 이미지가 살짝 깨져 보이는 경우가 있다.
Retina Display의 해상도 때문인데, 해결책은
2배 큰 이미지 만든 후, Retina Display용 CSS 적용하면 된다.
1. 2배 큰 이미지 만들기
Retina Display가 기존 IPhone해상도의 2배로 커졌으니, 해당 이미지들도 2배 크게 만든 후 적용 시키면 된다.
예를들어 20x20 아이콘이었다면 40x40으로 만들면 된다.
2. 불러오기
자 그럼 Retina Display용 CSS는 어떻게 불러오느냐?
핵심은 Media Query!
Retina Display용 CSS의 Media Query를
1. Retina Display용 CSS 파일을 만들경우
2. html안에서 Retina Display용 CSS를 추가할 경우
이런식으로 2배 커진 이미지를 배경이미지로 Overwrite하고,
screen and (-webkit-min-device-pixel-ratio: 2)
로 해주면 된다.
아이폰에서는 Safari로 접속을 하므로 Webkit CSS를 써도 무관하지만.. 이런식으로 특정 Browser에 Dependent된 기술은 바람직하지 않다고 생각한다. 이 문제는 할일이 없어 시간이 엄청 남아돌때 포스팅 하기로 하고..
CSS 로드 케이스별로 보면.
1. Retina Display용 CSS 파일을 만들경우
<link rel="stylesheet" href="retina.css" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" title="title" charset="utf-8">
2. html안에서 Retina Display용 CSS를 추가할 경우
<style type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)">
3. 일반 CSS안에 Retina Display용 CSS를 추가할 경우
@media screen and (-webkit-min-device-pixel-ratio:2) {
#icon {
....
}
}
이런 방식으로 추가를 하면 된다.
3. 적용 방법
마지막으로 적용방법이다.
기존의 코드는 손대지 말고, Retina Display용 CSS만 추가하면 된다.
background-image: url("icon40x40.png");
-webkit-background-size:20px 20px;
배경 이미지 크기를 기존 아이콘의 사이즈로 적어주면 된다.
배경이 아닌 일반 이미지 또한 2배로 크게 만들고 강제로 기존 사이즈 적어주면 되긴 하는데..
이 경우는 접속 환경의 Retina Display인지 아닌지 구분할 수 없다는 문제점이 있다.
하지만 아래 나온 class 할당 방식으로 해결할 수 있긴 하지만 바람직한 방법은 아닌듯 하며,
번거롭지만 배경이미지로 바꾸는게 나아보인다.
배경이미지외
Retina Display에만 특별히 적용을 해야 할 경우
class를 부여해서 조절하는 방법이 있다.
.forWeb { display: block }
.onlyRetina { display: none }
@media screen and (-webkit-min-device-pixel-ratio:2) {
.forWeb { display: none }
.onlyRetina { display: block }
}
'웹[기술|표준|접근] > 작은 팁' 카테고리의 다른 글
| CSS for iPad Orientation (화면회전) (0) | 2011/03/17 |
|---|---|
| CSS for Retina Display (background) (1) | 2011/03/14 |
| 헤딩 제대로 사용하기. - 후편(완)- (3) | 2010/01/09 |
| 헤딩 제대로 사용하기(시멘틱 마크업하기). -전편- (2) | 2010/01/06 |
| IE7에서 text-decoration이 이상하게 나올때. (0) | 2009/02/02 |
| Conditional comments를 이용해서 CSS-Hack 안쓰고 코딩하기 (4) | 2008/11/27 |
댓글을 달아 주세요
당신은 자신의 마지막 단락에 큰 지점을 생산하고 있습니다. 저희는 귀하의 포인트와 더 함께 동의하지 못했습니다. 오늘날의 현대 세계에서,이 문제에 접근은 오늘날의 아이가 부족한 것입니다. 우리는 우리의 방법을 잃지 않을 때문에 우리 애들이 주제에 대한 자세한 내용을 보려면 있는지 확인해야합니다.
2011/11/21 05:15 [ ADDR : EDIT/ DEL : REPLY ]