CSS for iPad Orientation (화면회전)

CSS for Retina Display 에 이어 이번엔 IPad 화면 회전에 따른 CSS 적용법에 대해 간략하게 적어보겠다.
사실 화면회전에 따라 CSS를 구별해서 적용하는 경우는 드물것이나, IPad에 맞춤 웹페이지를 제작하다보면 어느순간 필요해지는 부분이다.

1. Media Query
iPad Orientation의 Media Query는

all and (orientation:portrait)
all and (orientation:landscape)

이다.
portrait는 세로화면,
landscpae는 가로화면이다.

2. 불러오기
CSS for Retina Display와 동일하다

2-1. 별도의 CSS File을 만든경우

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”/stylesheets/portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”/stylesheets/landscape.css”>

2-2. style을 구분하여 불러올 경우

<style type=”text/css” media=”all and (orientation:portrait)”>
<style type=”text/css” media=”all and (orientation:landscape)”>

2-3. 일반적인 style 안에서 불러올 경우

@media all and (orientation:portrait) {
#for portrait style codes..
}
@media all and (orientation:landscape) {
#for landscape style codes..
}

3. 예제
세로용에는 portrait, 가로용에는 landscape를 부여하고, CSS를 통해 제어해보겠다.

<style type=”text/css” media=”screen”>
@media all and (orientation:portrait) {
.portrait { display: block; }
.landscape { display: none; }
}
@media all and (orientation:landscape) {
.portrait { display: none; }
.landscape { display: block; }
}
</style>

Orientation:
<div>Portrait</div>
<div>Landscape</div>

4. 확인
4-1. Portrait(세로모드)

 

 

 

 

 

 

4-2. Landscpae(가로모드)

 

 

 

 

CSS for Retina Display (background)

IPhone4에서 웹페이지를 보다보면, 이미지가 살짝 깨져 보이는 경우가 있다.
Retina Display의 해상도 때문인데, 해결책은
2배 큰 이미지 만든 후,  Retina Display용 CSS 적용하면 된다.
1. 2배 큰 이미지 만들기
Retina Display가 기존 IPhone해상도의 2배로 커졌으니, 해당 이미지들도 2배 크게 만든 후 적용 시키면 된다.
예를들어 20×20 아이콘이었다면 40×40으로 만들면 된다.
2. 불러오기
자 그럼 Retina Display용 CSS는 어떻게 불러오느냐?

핵심은 Media Query!

Retina Display용 CSS의 Media Query를

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배 커진 이미지를 배경이미지로 Overwrite하고,

배경 이미지 크기를 기존 아이콘의 사이즈로 적어주면 된다.
배경이 아닌 일반 이미지 또한 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 }
}