html | 모바일 meta 테그

<!--일반웹페이지추가소스-->

<?
 if ( preg_match('/Android|iPhone/',$_SERVER['HTTP_USER_AGENT']) ) {
 echo "<script>location.href='모바일페이지주소';</script>";
 exit;
}?>

뷰포트는 모바일 웹과 반응형 웹에 꼭 필요한 것이며 webkit 방식의 브라우저에서 활성화 된다고 합니다.

사용법과 속성에는 이런것들이 있습니다.

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

meta name="viewport" : 뷰포트 선언

content="width=device-width" : 콘텐츠를 표현할 넓이 ('디바이스 크기에 맞추겠다' 고 선언)

intial-scale=1 : 초기 크기 설정(기본 꽉찬 화면)

minimum-scale=1 : 최소 크기 설정 (기본값 : 0.25, 범위 : 0~10.0)

maximum-scale=1 : 최대 크기 설정(최대 배율 범위 : 0~10.0)

user-scalable=no : 사용자 단말의 확대기능 사용 유무 선언(yes/no)

이렇게 뷰포트를 설정하고 나서 이미지 사이즈를 고정값으로 설정해 놓게 되면 고정값 그대로 출력되고 다른 메뉴들이 축소 되는 현상이 발생하기도 하는데요,

그때는 %단위를 쓰시거나 max-width등을 사용하시면 됩니다.

그리고 뷰포트는 기계가 아닌 디자인을 보고 셋팅하시는게 더욱 효과적입니다.