View port

참고사이트 : https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

viewport 설정

							// viewport 설정
							<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=medium-dpi">
						

viewport로 지정할 수 있는 속성

viewport로 지정할 수 있는 속성
속성 기능
width 너비(픽셀 단위), 기본값은 980. 범위는 200~1000, device-width를 지정할 수 있다.
height 높이(픽셀 단위), 기본값은 980. 범위는 223~10000, device-width를 지정할 수 있다.
initial-scale 초기 배율, 기본값은 꽉 찬 화면으로 표시, 범위는 minimum-scale과 maximum-scale에 따름.
minimum-scale 최소 배율, 기본값은 0.25, 범위는 0~10.0
maximum-scale 최대 배율, 범위는 0~10.0
user-scalable 사용자가 확대/축소 할 수 있는 지 여부, yes/no 중 선택

예를 들어 너비를 320px로 고정하고, 확대/축소를 못하게 하려면 아래와 같이 설정한다.

							// viewport 설정
							<meta name="viewport" content="width=320, user-scalable=no">
						

script로 viewport content 값 지정하기

참고사이트 : http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

							 
						
							window.onload = function () {
								var viewport = document.getElementById('viewport'); 

								if (screen.width >= 700) {
									viewport.setAttribute("content", "width=1000"); 
								}else {
									viewport.setAttribute("content", "width=device-width, initial-scale=1"); 
								}
							}