모바일웹 OrientationChange; - 모바일 회전변경 이벤트
페이지 정보
본문
onorientationchange : 방향이 변경될때 일어나는 이벤트
window.orientation : 현재 모바일 방향(각도) 속성
0 : 세로, -90: 가로, 90: 가로
----- 각 방향 별 적용CSS 설정함수 예제 -----------
------------CSS-----------
<link rel="StyleSheet" href="세로모드CSS파일" type="text/css" id="orient_css">
------------JS-----------
function orient() {
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();
------------HTML-----------
<body onorientationchange="orient();">
....
- 이전글화면 스크롤 시 배경화면 투명도 변환하기 15.05.28
- 다음글웹페이지 접근 단말기 (모바일인지) 체크하기 15.05.15
댓글목록
너갱이님의 댓글
너갱이 작성일
모바일 웹사이트를 제작하여 사용하다 보면 세로로 볼 수도 있고, 가로로 볼 수도 있습니다.
구조는 가로(landscape mode) 와 세로(portrait mode)에 크게 문제가 되지 않습니다.
하지만 다른 세부적인 요소들에 있어서는 각각의 모드별로 스타일을 따로 줘야 할 경우가 있습니다.
각각의 스타일을 주기 위하여는 크게 "Javascript" 를 사용하는 방법과 "media query" 를 사용하는 방법이 있습니다.
1. Javascript 를 이용한 방법
자바스크립트를 이용한 방법은 절차적 관점에서 봐서는 아래의 개념과 절차를 따릅니다.
가. <link rel 를 통하여 스타일을 링크하고, 해당 부분에 D.O.M 을 위한 "아이디" 를 설정합니다.
나. 자바스크립트를 선언하여 준비 합니다.
다. body 테그에 onorientationchange 이벤트를 통하여 device 의 변경때마다 자바스크립트 함수를 호출합니다.
ex)
<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가지 정도로 나뉠 수 있습니다.
가. <link rel="stylesheet" media="print and (min-width:25cm)" href="anycss.css" />
나. @media screen and (miin-width:400px) and (max-width:700px) {
-----------------
}
다. divice-width / device-height
@media screen and (device-width:400px) {
-----------------
}
라. orientation
@media all and (orientation:portrait / landscape) {
-----------------
}
마. resolution (dpi, dpcm)
@media print and (min-resolution:300dpi) {
-----------------
}
