[HTML] 디바이스 회전을 고려한 모바일 웹 코드
모바일웹은 미디어쿼리를 통해서 사용자의 환경에 알맞은 조건css를 고려하는 것이 대부분이다.
그런데, pc 브라우저에서는 그다지 고민하지 않았던 휴대전화 돌리기(?)로 인해 가로, 세로에 각각 반응하는 미디어쿼리까지
짜야하니.. 참 머리가 아파진다.
무엇보다 화면 회전을 자바스크립트가 제때 잘 캐치할 수 있는기가 관건인데,
이벤트를 캡쳐하는 것 자체는 그다지 어렵지 않지만, 예상치 못한 문제가 발생했다.
폰을 이렇게 세로로 들고 있다가 |
|--- 320px ---|
|
화면의 가로, 세로를 제어하는 애들이 갑자기 이상하게 가로 세로를 반대로 잡는 경우가 생겨버렸다.
특히 다른 휴대폰에서는 괜찮았는데, 갤럭시s3와 옵티머스g에서 이런 현상이 발생했다.
그래서 하는 수 없이 꼼수를 찾을 수 밖에 없었고,
ALERT 창을 통해 가로의 값을 계속 추적해본 결과,
가로로 눕힐때 분명 가로 너비가 600px임에도 <body>사이즈는 320px으로 나오고, <body>안에서 컨텐츠를 전체로 감싸고 있는
<div class="컨테이너다"> 이 놈은 정상적으로 자신의 분수(?)를 알고 있는 것을 캐치하였다.
function getReDeviceWidth() {
var 방향 = window.orientation;
var 컨테이너다의 너비 = $(".컨테이너다").css("width");
if (방향 == 0 || 방향 == 180) {
//세로일때
} else{
//가로일때
}
}
window.onorientationchange = function() {
getReDeviceWidth();
}
window.onorientationchange 이 함수가 화면 회전 이벤트를 캡쳐한다.
그리고 그 함수를 타면, 화면 방향값(숫자값이 리턴됨)을 판단하여, 0, 180 일때와 아닐때를 구분하였고,
이때 body와 "컨테이너다"를 각각 다르게 값을 반영하였더니 문제없이 화면 회전에도 반응하는 모습을 보였다.