2019 Nam Insik Portfolio site ː Designed by werty.co.kr ː nis@werty.co.kr
 
 
 
 
 
 
 
 
jQuery – 스마트폰 스크린 회전 감지 스크립트

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

일단 css의 미디어쿼리로 처리하는 방법을 보면 아래와 같다.

 위 처럼 쓰면 일단 작동이 제대로 되긴 된다. #cover가 사라져있다가 landscape 되는 순간 보여지게 되는 것이다.

그러나 문제는 입력칸에 포커스가 되었을 때다.
이 때 자판이 올라오게 되는데 자판이 올라오면서 화면의 가로 세로 비율이 바뀌게 되고 css에서는 가로모드라 감지하고 #cover 요소가 보이는 코드가 실행이 된다.

즉, 위 코드는 알고보면 가로 :  세로 비율을 갖고 처리하는 것 같다.

그래서 스크립트로 처리하기로 하여 아래와 같이 js 코드를 작성하였다. 

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

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

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

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

nam insik

이메일 : nis@naminsik.com

.