2013. 1. 23. 19:45ㆍDevelopment/[HTML5] 웹표준
모바일웹은 미디어쿼리를 통해서 사용자의 환경에 알맞은 조건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와 "컨테이너다"를 각각 다르게 값을 반영하였더니 문제없이 화면 회전에도 반응하는 모습을 보였다.
'Development > [HTML5] 웹표준' 카테고리의 다른 글
| 자바스크립트 - GPS 정보 가져오기 (2) | 2019.03.21 |
|---|---|
| 아주 유용한 table 헤더(thead) 고정 소스 (0) | 2013.01.09 |
| SyntaxHighlighter 3.0.83 버그 대처법 (0) | 2012.12.24 |
| 배경이미지와 그라데이션을 동시에 사용하는 CSS (2) | 2012.12.12 |
| 폰트 고정하기 : -webkit-text-size-adjust (0) | 2012.12.12 |