HTML5/CSS3 수업자료

스마트폰, 태블릿 PC 레이아웃 참고 자료

관리자 2019.04.02 18:45 조회 수 : 755

 

모바일 페이지 크기 자동 맞추기

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

 

 

디바이스별 접근

   <script>

        var myAgent = navigator.userAgent.toLowerCase();

        var mobile=["iphone","ipod","android","blackberry","window ce","nokia","webos","opera mini","sonyericsson","opera mobi","iemobile"];

        for(var i=0; i<mobile.length;i++){

            if(myAgent.indexOf(mobile[i])>=0){

                location.href="mobile_layout.html";

                break;

            }

        }

    

    </script>

 

 

pc와 mobile 구분해서 접속(터치식으로 인식)

<script type="text/javascript"> 

         if(('createTouch' in document) || ('ontouchstart' in document)){

            location.href = "모바일로 연결될 페이지";

         }

  </script>

 

<!-- 아이폰 홈화면 아이콘 -->
    <link rel="apple-touch-icon-precomposed" href="img/mobile/m_icon.png">
 
    <!-- 브라우저 파비콘 -->
    <link rel="shortcut icon" href="img/mobile/m_icon.png">

 

mb_img.jpg

 

내용

 

<h1>Lorem ipsum dolor sit amet</h1>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras rhoncus hendrerit mi, at pretium purus convallis non. Integer semper magna ac mauris hendrerit iaculis ac faucibus turpis. Praesent pharetra sem et nibh auctor auctor adipiscing augue rutrum. Ut sapien quam, bibendum eget malesuada non, porta sed ligula. Donec interdum suscipit mattis. Praesent dictum odio non nisi pharetra pellentesque. Phasellus nec quam sit amet nunc ullamcorper pulvinar nec quis tellus. Pellentesque consectetur tellus ac augue tincidunt luctus. Aenean consectetur, justo vel vestibulum cursus, risus arcu ornare dolor, nec elementum diam erat ac tortor. Morbi eleifend, erat sit amet posuere pretium, purus dui ullamcorper urna, eu rutrum mi augue tristique odio. Proin commodo mi non nibh interdum ultricies. Donec vitae leo quis ante vestibulum accumsan ut sed nulla. Maecenas ligula orci, fringilla ac elementum eget, congue quis dolor. Cras sagittis rhoncus faucibus.</p>

 
 
 
이 게시물을
목록
쓰기 태그
keyboard_arrow_up