모바일 화면 방향 체크

한달전쯤 설문조사 페이지 퍼블리싱을 진행했는데,

기획에선 모바일 세로모드만 적용해도 좋다고 해서 가로모드는 전혀 고려하지 않고 만들었다

하지만 팀장님이 가로모드에서 화면이 깨지지 않느냐 말씀하셔서 부랴부랴 가로모드 처리 방법을 찾았다

모바일 가로 화면 css를 억지로 맞추기보다 모바일 화면을 세로로 고정시키는 방법으로 하려고 했지만 스크립트를 찾아봤지만 찾지 못했다

그래서 차선으로 화면을 가로로 돌렸을 땐 다른 화면을 보여주는 방법으로 수정하기로 결정.

구글링에서 찾은 코드는 함수형태가 아닌 제이쿼리 ready 안에 들어있는 스크립트였는데, 화면 방향을 전환할 땐 적용이 되었지만 가로모드에서 새로고침을 했을 땐 스크립트 적용이 안되어 함수로 만들고 ready 함수 안에도 넣어주었다

또 모바일에서만 사용해야하니 화면 width도 계산하여 함수를 그 안에 넣어 사용

    
    $(document).ready(function() {
        //모바일에서만 적용되도록
        var winWidth = $(window).width();
        if(winWidth < 769){
            mobileLandscapeChk();
        }
    }); //jqb
    
 
    function mobileLandscapeChk() {
        var supportsOrientationChange = "onorientationchange" in window,
            orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
        
        //화면방향에 따라 보여줌
        window.addEventListener(orientationEvent, function() {
            landscapeView();
        }, false);
        
        //최초 접속시에 화면방향 체크해서 보여줌
        window.onload = landscapeView();
        
        //화면방향 체크해서 보여줄 view 체크
        function landscapeView(){
            if (window.orientation == 0) {
                document.getElementById('portrait').style.display = 'block';
                document.getElementById('landscape').style.display = 'none';
            } else if (window.orientation == 90 || window.orientation == -90) { //왼쪽, 오른쪽 방향전환 모두 적용
                document.getElementById('portrait').style.display = 'none';
                document.getElementById('landscape').style.display = 'block';
            }
        }
    }

---

초보 퍼블리셔의 공부정리 블로그입니다.

내용에 오류가 있거나 수정사항이 있다면 꼭 댓글 부탁드립니다