본문 바로가기

아이폰 관련 가로,세로 모드시에 선택적 CSS파일 가져올수 있도록 하는 자바스크립트

반응형

아이팟터치/아이폰 ( 4세대 미만 ) 에서는 보통 가로 320 px, 세로 480 px
입니다.
그러므로 CSS파일 2개를 제작해주셔야합니다.
하나는 가로 320 px 로 지정하셔서 헤더,미들,푸터 제작후
가로 480 px 로 지정하신후 제작하셔서 2개의 CSS로
다음,네이버,파란,트위터,구글 처럼 애플모바일기기 호환성을 높힐수 있습니다.

소스 상에서는 다음과 같은 자바스크립트로 인식하게 할수있습니다.
<link rel="StyleSheet" href="세로모드CSS파일" type="text/css" media="screen" id="orient_css">
<!-- 위는 자바스크립트를 적용전 CSS파일(세로모드)를 불러와 가로모드일경우 바꿔주기 위한 아이디를 적용한 링크 태그 입니다. -->
<script type="text/javascript">
    function orient()
    {
        switch(window.orientation){ 
            case 0: document.getElementById("orient_css").href = "세로모드CSS파일";
                break;
              
         case -90: document.getElementById("orient_css").href = "가로모드CSS파일";
                    break;
                    case 90: document.getElementById("orient_css").href = "가로모드CSS파일";
                        break;
                   
    }
}
    window.onload = orient();
   
</script>

위처럼 작성하시면 문제가 될것은 없습니다.
나머지는 여러분들의 몫 입니다.
반응형