본문 바로가기

HTML

viewport 설정

뷰포트(viewport)

웹 브라우저에서 내용을 표시하기 위한 영역을 말한다. 데스크톱 브라우저와 모바일 브라우저의 뷰포트 개념은 서로 다르다. 도큐먼트의 사이즈가 뷰포트의 크기를 결정한다.

   

데스크톱 브라우저: 화면에 보이는 영역 전체

모바일 브라우저: 웹 페이지의 실제 크기, 브라우저의 크기(스마트폰 디바이스의 크기)와 상관없다.

   

풍경을 담는 사진에 비유한다면,

   

데스크톱 브라우저: 카메라의 사각형 앵글

모바일 브라우저: 실제 세상에 존재하는 풍경 자체, 앵글과 관계없다.

   

아래 meta 태그를 선언해 모바일 뷰포트와 데스크톱 뷰포트를 동일하게 맞춘다.

   

<meta name="viewport" content="width=device-width"> 생략가능하다.

   

너비를 지정

px 단위를 생략할 수 있다.

<meta name="viewport" content="width=320px">

   

너비를 장치너비로 설정

<meta name="viewport" content="height=device-height">

   

초기 화면 배율 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0">

   

최소, 최대 화면 배율 설정

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0">

   

크기 조절을 원치 않을 때

<meta name="viewport" content="user-scalable=no, widh=device-height">

   

[참고]

http://aboooks.tistory.com/352

http://goo.gl/wMrr9e

   

   

'HTML' 카테고리의 다른 글

reset, normalize  (0) 2015.04.02
reset (스타일 초기화)  (0) 2015.04.01
meta 태그  (0) 2015.03.30
lang 속성  (0) 2015.03.24
title, h1~h6, p 태그  (0) 2015.03.23