모바일 페이지 만들 때 알아 두어야 할 것들

1. 사이즈설정

<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" />
 

모바일 브라우저에 맞게 사이즈가 정해지도록 하는 소스.

densitydpi가 medium-dpi이면 아이폰이나 갤럭시나 같은 사이즈로 보이는 걸 보니다른 스마트폰에서도 동일하게 보일 것 같다.

high-dpi로 하면 갤럭시는 가로가 480사이즈로 보인다.

2. 주소줄 설정

<script type="text/javascript">

window.addEventListener('load', function() {

setTimeout(scrollTo, 0, 0, 1);

}, false);

</script>
 

주소줄이 없어지게 하는 소스라고 한다.

3. 모바일 홈페이지로 이동하기

모바일 홈페이지용 주소가 따로 없을 때,
일반 홈페이지와 같은 주소로 접속하면 자동으로 모바일용 페이지로 이동시켜주는 소스

접속환경을 체크해서 이동시키는 소스라 이 소스에 없는 모바일기종은 그냥 일반 페이지가 나올 듯...

3-1. PHP용

<?

$arr_browser = array ("iPhone","iPod","IEMobile","Mobile","lgtelecom","PPC");

for($indexi = 0 ; $indexi < count($arr_browser) ; $indexi++) {

if(strpos($_SERVER['HTTP_USER_AGENT'],$arr_browser[$indexi]) == true){

header("Location: 이동할 경로");

exit;

}

}

?>

3-2.ASP용

<%

mobrwz = "iPhone|iPod|IEMobile|Mobile|lgtelecom|PPC"

spmobrwz = split(mobrwz,"|")

agent = Request.ServerVariables("HTTP_USER_AGENT")

For i = 0 To UBound(spmobrwz)

If InStr(agent,spmobrwz(i)) > 0 Then

Response.Redirect("이동할 경로")

Exit For

End If

Next

%>

3-3. 자바스크립트

<script type="text/javascript">

var ua = window.navigator.userAgent.toLowerCase();

if(/iphone/.test(ua) || /android/.test(ua) || /opera/.test(ua) || /bada/.test(ua)) {

document.location.replace('이동할 경로');

}

</script>