interactive
모바일 작업시 기본사항 본문
1. 기본적인 html 셋팅
메타테그를 이용하여 모바일에 적합한 사이트 만들어야 합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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" />
<title></title>
</head>
content="width=device-width"는 웹페이지의 가로를 모바일 가로사이즈에 맞춘다는 뜻입니다. 즉, 가로 스크롤이 생기지 않습니다.
initial-scale=1은 화면을 초기화 할때 몇배율로 할 것인지 정합니다. 1로 한다면 딱 정상적인 배율로 보입니다.
maximum-scale=1은 손가락 두개를 쫙 벌려서 확대를 얼마나 할 수 있는지에 대한 부분입니다.
1로 하면 확대가 안되고 2로 하면 두배, 3으로하면 세배 확대가 됩니다.
minimum-scale=1은 반대로 손가락 두개를 오므려서 얼마나 축소할 수 있는지에 대한 부분입니다.
1로하면 축소가 안되고, 0.5는 50%축소가 됩니다.
user-scalable=no는 확대축소가 가능한지에 대한 부분입니다.
위에서 아무리 확대축소를 할 수 있게 해놓아도 여기서 no를 하면 안됩니다. yes를 하면 확대축소가 가능합니다.
target-densitydpi=medium-dpi는 안드로이드의 경우 사이트가 어떤 화면크기에 맞추어 개발되었는지를 명시해주는 태그입니다.
2. 주소창 자동숨김
위의 자바스크립트를 이용하면 주소창이 자동으로 숨겨지게 됩니다. 물론 터치를 하면 다시 주소창이 나오니 유용하게 활용.
<script type="text/javascript" language = "javascript">
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
</script>
전제 조건은, 스크롤바를 포함한 전체높이보다 콘텐츠의 길이가 길어야 한다는 점
브라우저에 따라 다르지만 대부분은 주소창이 남게 되어있습니다.
이를 위해서 위와 같은 스크립트를 활용하여 스크롤을 강제로 시키는 경우가 많습니다 국내 에서도 대부분은 그렇게 하고 있습니다.
위 스크립트는 크로스 브라우징이 되지 않으니 주의 바랍니다. 페이지 로드시 scrollTo(0, 0)을 해주시면 됩니다.
3. 전화자동걸기 태그 방지
전화번호 형식의 경우 자동전화걸기로 연결되는데 이를 방지. <meta name="format-detection" content="telephone=no" />
4. 바탕화면 아이콘 추가
이것은 아이폰이나 아이패트, 아이팟터치등에 애플 계열에 사용되는 부분으로 소스는 다음과 같습니다.
<link rel="apple-touch-icon" href="이미지경로.png" />
사파리로 북마크를 해서 바탕화면으로 보낼때 사용되는 아이콘를 정해주는 것입니다.
주의해야될 점은 꼭 png파일로 저장을 해주셔야 합니다.
'Design' 카테고리의 다른 글
| [CSS3] gradient 속성알아보기 (0) | 2012.08.06 |
|---|---|
| CSS3 벤더 프리픽스 (0) | 2012.07.26 |
| 텍스트 줄바꿈, 글자자르기 CSS (6) | 2012.07.24 |
| 모든 브라우저, input 커서 이동시 노란테두리 없애기 (0) | 2012.07.24 |
| 링크 점선 테두리를 없애는 CSS (1) | 2012.07.20 |
