모바일 개발 중 킷캣 이전의 단말기에서 로테이션을 할 경우 뷰포트가 리셋되는 버그가 발견되었다.
아래와 같이 메타태그로 뷰포트를 확대도 축소도 되지 않도록 사용자 스케일링을 막아두었는데, 로테이션만 해도 이 메타태그가 풀려버리는 문제였다.
아이폰에서는 발견되지 않았고, 삼성 단말기 위주로 발견되었기 때문에 삼성 단말기의 문제인지 의심했었는데, 구글링을 한 결과 구형 안드로이드 기기에서 전반적으로 나타나는 문제로 확인되었다.
Android orientation change scaling bug 라는 제목으로 센챠 포럼에도 관련 글이 올라온 것을 확인할 수 있었고, 여기에 센챠 내에서 해결한 방법도 설명되어 있었다.
해결책
헤더의 메타 태그에도 id를 지정하고 자바스크립트를 사용해 셀렉터로 가져와서 값을 변경하는 것이 가능할까?
당연히 가능하고 변경된 값은 즉시 적용된다. 따라서 해결책은 매우 단순해진다.
오리엔테이션이 변경되는 이벤트를 잡아서 메타태그를 재설정해주면 된다.
아래는 간단하게 위의 아이디어를 자바스크립트로 짠 내용이다. 한가지 주의할 점은 모바일 브라우저가 orientationchange 이벤트를 지원하지 않을수도 있다는 점이다. 대신 resize 이벤트를 잡아주는 것은 어떨까 생각해본다.
아래 코드는 위의 소스를 closure complier 로 압축한 소스이다.
아래와 같이 메타태그로 뷰포트를 확대도 축소도 되지 않도록 사용자 스케일링을 막아두었는데, 로테이션만 해도 이 메타태그가 풀려버리는 문제였다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
아이폰에서는 발견되지 않았고, 삼성 단말기 위주로 발견되었기 때문에 삼성 단말기의 문제인지 의심했었는데, 구글링을 한 결과 구형 안드로이드 기기에서 전반적으로 나타나는 문제로 확인되었다.
Android orientation change scaling bug 라는 제목으로 센챠 포럼에도 관련 글이 올라온 것을 확인할 수 있었고, 여기에 센챠 내에서 해결한 방법도 설명되어 있었다.
해결책
헤더의 메타 태그에도 id를 지정하고 자바스크립트를 사용해 셀렉터로 가져와서 값을 변경하는 것이 가능할까?
당연히 가능하고 변경된 값은 즉시 적용된다. 따라서 해결책은 매우 단순해진다.
오리엔테이션이 변경되는 이벤트를 잡아서 메타태그를 재설정해주면 된다.
아래는 간단하게 위의 아이디어를 자바스크립트로 짠 내용이다. 한가지 주의할 점은 모바일 브라우저가 orientationchange 이벤트를 지원하지 않을수도 있다는 점이다. 대신 resize 이벤트를 잡아주는 것은 어떨까 생각해본다.
var viewPort = document.querySelector('meta[name="viewport"]');
if (viewPort) {
document.body.addEventListener('orientationchange', function() {
viewPort.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
}, false);
}아래 코드는 위의 소스를 closure complier 로 압축한 소스이다.
var a=document.querySelector('meta[name="viewport"]');a&&document.body.addEventListener("orientationchange",function(){a.content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"},!1);
