반응형
반응형웹,html5,모바일,웹앱,하이브리드앱,뷰포트,viewport,PhoneGap,Sencha Touch,Android,안드로이드,아이폰,IOS,iPhone,크롬,Explorer8,Explorer9,Explorer10
모바일웹 구현시 고려해야 할 부분중 가장 중요하면서 기본적인 내용으로
다양한 디바이스에 보여지는 웹페이지 사이즈를 자동으로 조정하는기능이 필요합니다.
viewport 에 선언된 값(width)으로 100% 크기가 정의되어 디바이스 별 화면 사이즈 및 방향전환에 맞춰진다고 생각하시면 될듯.
아래 설정으로 간단히 구현 가능합니다.
<주석부분>
content="width=device-width" : 가로값 ('디바이스 크기에 맞추겠다' 고 선언)
intial-scale=1.0 : 처음 로딩 화면 비율
minimum-scale=1.0 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)
maximum-scale=1.6 : 최대 크기 설정(기본값 : 1.6 최대 : 0~10.0)
user-scalable=yes : 사용자 단말의 확대기능 사용 유무 선언(yes/no) 기본값 YES
<실제선언부>
가로
content="width=1024" 가로값을 1024 로 맞춤 (화면 HTML 코딩 구현시 BODY WIDTH 를 1024에 맞춰 코딩)
나머지는 기본값
반응형