Blog Content

  1. Home

    티스토리 뷰

    HTML5 - 05.ViewPort (뷰포트)

    Posted by Godffs on 2014. 1. 26. 23:43 in jQuery | javascript | CSS /

    반응형
    스파트폰 웹 개발을 할 때 가장 중요하고 기본이 되는거라고 생각하는게 ViewPort라고 생각이 됩니다.
    뷰포트는 기기별로 화면의 크기가 다른데요. 뷰포트를 사용하게 되면 자동으로 화면 사이즈를 맞춰주는 기능이 있습니다.

    뷰포트 속성
    width, height : px 단위 기본 960px
    initial-scale : 초기 배율, (기본값 : 꽉 찬 화면)
    minimum-scale : 최소 배율 0~10.0
    maximum-scale : 최대배율 0~10.0
    user-scalable : 확대 축소 여부 : yes/no


    뷰포트 사용 기본 코드 입니다.

     ex02.ViewPort.html
     
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <meta name="viewport" 
            content="width=device-width
                    , user-scalable=yes
                    ,initial-scale=1.0
                    , maximum-scale=3.0" />
        <title></title>
    </head>
    <body>
        <p>안녕하세요.</p>
        <p>반갑습니다.</p>
    </body>
    </html>
     


    결과 화면입니다. 실제 화면은 제 휴대폰(안드로이드)에서 캡쳐한 내용입니다. (ibbdemo에서는 다 잘보이네요..;;)

    ViewPort를 적용 했을때



    ViewPort를 적용 안했을때 


    반응형
    저작자표시 비영리 변경금지

    'jQuery | javascript | CSS' 카테고리의 다른 글

    HTML5 - 07.canvas 기본사용 : 삼각형 (캔버스)  (0) 2014.02.16
    HTML5 - 06.canvas 기본사용 : 사각형 (캔버스)  (0) 2014.02.01
    HTML5 - 04.디바이스 별로 화면보기  (0) 2014.01.26
    HTML5 - 03.디버깅  (0) 2014.01.25
    HTML5 - 02.소스와 디자인 같이 보기  (0) 2014.01.25

    Comments

Copyright © 2016 by WaaNee. All Rights Reserved.

티스토리툴바