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(가로모드)

 

 

 

 

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

Google+ photo

Google+의 계정을 사용하여 댓글을 남깁니다. 로그아웃 / 변경 )

%s에 연결하는 중