mobile | 모바일웹의 기본세팅(기본 코드)
페이지 정보
작성자 madalla 작성일13-06-22 14:18 조회16,588회 댓글0건본문
모바일웹은 모바일에서 잘 보일 수 있도록 최적화 시킨 웹페이지입니다.
기본적인 코딩은 표준웹코딩이며 일반적인 웹코딩과 크게 다르지 않습니다.
모바일웹에서 중요한 것은 메타테그를 이용하여 웹페이지가 아닌 모바일에 적합한 사이트를 만들어 주는 것입니다.
기본 적인 코딩입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<title>madalla 모바일웹</title>
<link rel="apple-touch-icon" href="이미지경로.png" />
<script type="text/javascript">
<!--
// 주소창 자동 닫힘
window.addEventListener("load", function(){
setTimeout(loaded, 100);
}, false);
function loaded(){
window.scrollTo(0, 1);
}
//-->
</script>
</head>
<body>
표준웹코딩 페이지
</body>
</html>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
이부분을 반드시 추가해주셔야 모바일웹에서 제대로 보입니다. 이 메타태그가 없으면 제크기의 화면으로 볼 수가 없습니다.
반드시 추가해주셔야 모바일 화면의 크기가 고정이 됩니다. 즉, 가로 스크롤이 생기지 않습니다. 물론 css를 통해서 가로 사이즈를 고정시켜주셔야합니다.
viewport를 지정해주면 자동으로 크기가 조절되는 기능입니다.
- width : 너비(픽셀)
- height : 높이(픽셀)
- user-scalable : 확대/축소 여부 (yes/no)
- initial-scale : 초기 배율(기본 꽉 찬 화면)
- minimum-scale : 최소 배율(기본값: 0.25, 범위:0~10.0)
- maximum-scale : 최대 배율(범위:0~10.0)
- target-densitydpi=medium-dpi : 안드로이드에만 적용되는 태그
아이폰와 안드로이드에 dpi개념이 틀립니다.
아이폰3의 320해상도, 아이폰4의 640해상도
아이폰의 가로해상도는 640이기때문에 320인 사이트가 뿌옇게 보이는것입니다.
해결방법은 가로 세로 두배의 이미지파일을 만들어 실제 적용하는 가로세로를 width와 height로 줄여주는 것입니다.(그래야 해상도가 선명해보입니다. 실제로 적용해보세요~)
그렇다고해도 아이폰의 해상도와 갤럭시의 비율문제를 완전히 해결하기는 어렵습니다.
모바일웹은 되도록 텍스트 위주의 사이트가 되어야하고 이미지의 경우는 width를 %로 잡아 작업하는 것이 그나마 보완이라면 보완이겠죠.
<link rel="apple-touch-icon" href="이미지경로.png" />
아이폰 계열에서 바탕화면으로 보낼때 사용되는 아이콘를 정해주는 것입니다. 꼭 png파일로 저장을 해주세요
<script type="text/javascript">
<!--
// 주소창 자동 닫힘
window.addEventListener("load", function(){
setTimeout(loaded, 100);
}, false);
function loaded(){
window.scrollTo(0, 1);
}
//-->
</script>
주소창이 자동으로 숨겨지게 되는 스크립트입니다. 물론 터치를 하면 다시 주소창이 나오니 유용하게 쓰시면 될 거 같습니다.
기본적인 코딩은 표준웹코딩이며 일반적인 웹코딩과 크게 다르지 않습니다.
모바일웹에서 중요한 것은 메타테그를 이용하여 웹페이지가 아닌 모바일에 적합한 사이트를 만들어 주는 것입니다.
기본 적인 코딩입니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
<title>madalla 모바일웹</title>
<link rel="apple-touch-icon" href="이미지경로.png" />
<script type="text/javascript">
<!--
// 주소창 자동 닫힘
window.addEventListener("load", function(){
setTimeout(loaded, 100);
}, false);
function loaded(){
window.scrollTo(0, 1);
}
//-->
</script>
</head>
<body>
표준웹코딩 페이지
</body>
</html>
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
이부분을 반드시 추가해주셔야 모바일웹에서 제대로 보입니다. 이 메타태그가 없으면 제크기의 화면으로 볼 수가 없습니다.
반드시 추가해주셔야 모바일 화면의 크기가 고정이 됩니다. 즉, 가로 스크롤이 생기지 않습니다. 물론 css를 통해서 가로 사이즈를 고정시켜주셔야합니다.
viewport를 지정해주면 자동으로 크기가 조절되는 기능입니다.
- width : 너비(픽셀)
- height : 높이(픽셀)
- user-scalable : 확대/축소 여부 (yes/no)
- initial-scale : 초기 배율(기본 꽉 찬 화면)
- minimum-scale : 최소 배율(기본값: 0.25, 범위:0~10.0)
- maximum-scale : 최대 배율(범위:0~10.0)
- target-densitydpi=medium-dpi : 안드로이드에만 적용되는 태그
아이폰와 안드로이드에 dpi개념이 틀립니다.
아이폰3의 320해상도, 아이폰4의 640해상도
아이폰의 가로해상도는 640이기때문에 320인 사이트가 뿌옇게 보이는것입니다.
해결방법은 가로 세로 두배의 이미지파일을 만들어 실제 적용하는 가로세로를 width와 height로 줄여주는 것입니다.(그래야 해상도가 선명해보입니다. 실제로 적용해보세요~)
그렇다고해도 아이폰의 해상도와 갤럭시의 비율문제를 완전히 해결하기는 어렵습니다.
모바일웹은 되도록 텍스트 위주의 사이트가 되어야하고 이미지의 경우는 width를 %로 잡아 작업하는 것이 그나마 보완이라면 보완이겠죠.
<link rel="apple-touch-icon" href="이미지경로.png" />
아이폰 계열에서 바탕화면으로 보낼때 사용되는 아이콘를 정해주는 것입니다. 꼭 png파일로 저장을 해주세요
<script type="text/javascript">
<!--
// 주소창 자동 닫힘
window.addEventListener("load", function(){
setTimeout(loaded, 100);
}, false);
function loaded(){
window.scrollTo(0, 1);
}
//-->
</script>
주소창이 자동으로 숨겨지게 되는 스크립트입니다. 물론 터치를 하면 다시 주소창이 나오니 유용하게 쓰시면 될 거 같습니다.
