rotation(즉 랜드스코프)
onorientationchange
window.onorientationchange = function() {
alert(window.orientation);
}
모바일 웹페이지는 onorientationchange 를 통하여 css 를 각각 따로 정의할 수 있다.
모바일 웹페이지는 세로 및 가로로 볼 수 있게끔 되어 있어 구조상으로는 가로 및 세로에 대한 조건에 대한 제약이 없으나
필요시 세부적인 요소들을 각각의 형태에 따라 css를 다르게 줘야 하는 경우가 생긴다.
각각 css를 분리해서 주기 위해서는 2가지 방법을 사용 할 수 있다.(자바스크립트,미디어쿼리)
1. javascript
1) <link rel 를 통하여 스타일을 링크하고, 해당 부분에 dom 을 위한 "아이디" 를 설정
2) 자바스크립트를 선언하여 준비
3) body 테그에 onorientationchange 이벤트를 통하여 device 의 변경때마다 자바스크립트 함수를 호출
<link rel="StyleSheet" href="세로모드CSS파일" type="text/css" media="screen" id="orient_css">
<body onorientationchange="orient();">
<script type="text/javascript">
function orient() {
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "세로모드CSS파일";
break;
case -90: document.getElementById("orient_css").href = "가로모드CSS파일";
break;
case 90: document.getElementById("orient_css").href = "가로모드CSS파일";
break;
}
}
window.onload = orient();
</script>
2. Media query 를 이용한 방법
media query를 이용하는 방법은 크게 5가지 정도로 나뉨
1) <link rel="stylesheet" media="print and (min-width:25cm)" href="anycss.css" />
2) @media screen and (miin-width:400px) and (max-width:700px) {
-----------------
}
3) divice-width / device-height
@media screen and (device-width:400px) {
-----------------
}
4) orientation
@media all and (orientation:portrait / landscape) {
-----------------
}
5) resolution (dpi, dpcm)
@media print and (min-resolution:300dpi) {
-----------------
}
'프로그래밍 > 모바일개발' 카테고리의 다른 글
| 모바일사이트모음 (0) | 2011.06.08 |
|---|---|
| 모바일웹 viewport 관련 (0) | 2011.04.21 |
| 모바일웹관련 파이어준님의 블로그 링크 (0) | 2011.04.20 |
| jquerymobile 로 만든.. 사이트들 (0) | 2011.04.20 |
| view포트 메타 태그 관련 (0) | 2010.10.20 |