스마트폰의 스크린이 가로모드와 세로모드를 감지하여 필요에 따라 스타일시트나 스크립트를 다르게 사용하는 경우가 있다.

일단 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 코드를 작성하였다. 

$(window).on("orientationchange",function(){
   if(window.orientation == 0) // Portrait
      {
         $('#cover').removeClass('show');
      }
   else // Landscape
      {
         $('#cover').addClass('show');
      }
});

 이렇게 하면 화면이 회전하지 않으면 #cover 요소에 show라는 클래스를 지우고, 회전하게 되면 show라는 클래스를 추가하는 스크립트이다.

스타일 시트는 #cover.show 라고 클래스를 가진 경우를 display:block 처리하면 된다.

작동 테스트 결과 아주 잘 작동되고 있다.

입력칸에 포커스가 가도 이상이 없다.