스마트폰의 스크린이 가로모드와 세로모드를 감지하여 필요에 따라 스타일시트나 스크립트를 다르게 사용하는 경우가 있다.
일단 css의 미디어쿼리로 처리하는 방법을 보면 아래와 같다.
#cover{
display:none;
}
@media only screen and (device-width: 768px) and (orientation: landscape) {
#cover{
display: block;
}
}
@media only screen and (min-device-width: 320px) and (orientation: landscape) {
#cover{
display: block;
}
}
위 처럼 쓰면 일단 작동이 제대로 되긴 된다. #cover가 사라져있다가 landscape 되는 순간 보여지게 되는 것이다.
그러나 문제는 입력칸에 포커스가 되었을 때다.
이 때 자판이 올라오게 되는데 자판이 올라오면서 화면의 가로 세로 비율이 바뀌게 되고 css에서는 가로모드라 감지하고 #cover 요소가 보이는 코드가 실행이 된다.
즉, 위 코드는 알고보면 가로 : 세로 비율을 갖고 처리하는 것 같다.
그래서 스크립트로 처리하기로 하여 아래와 같이 js 코드를 작성하였다.
이렇게 하면 화면이 회전하지 않으면 #cover 요소에 show라는 클래스를 지우고, 회전하게 되면 show라는 클래스를 추가하는 스크립트이다.
스타일 시트는 #cover.show 라고 클래스를 가진 경우를 display:block 처리하면 된다.
작동 테스트 결과 아주 잘 작동되고 있다.
입력칸에 포커스가 가도 이상이 없다.
추천 : 