[아이폰용 모바일웹 제작 팁]
1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기
<input type="text" />
<input type="search" />
<input type="tel" />
<input type="url" />
<input type="email" />
<input type="time" />
<input type="number" />
<input type="datetime" />
<input type="week" />
<input type="date" />
2. 툴바숨기기
<script type="text/javascript">
window.addEventListener("load",function(){
setTimeout(scrollTo,0,0,1);
},false);
</script>
3. 화면 회전시 폰트사이즈 고정
auto : 기본값, 화면회전후 비율에 맞게 폰트크기가 자동으로 조정됨.
none : 회전시에도 폰크기 고정.
n% : 폰트크기를 정한 크기로 변경.
html {
-webkit-text-size-adjust:none;
}
4. 모바일웹페이지를 가로 크기에 딱 맞추기
user-scalable=no : 사용자의 확대보기 허용 여부(no/yes)
initial-scale=1.0 : 페이지 로딩시 확대비율
maximum-scale=1.0 : 최대확대비율
minimum-scale=1.0 : 최소축소비율
width=device-width : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width" />
5. 회전에 따라 다른 css 적용하기
<script type="text/javascript">
function orient()
{
switch(window.orientation){
case 0: document.getElementById("orient_css").href = "css/iphone_portrait.css";
break;
case -90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
case 90: document.getElementById("orient_css").href = "css/iphone_landscape.css";
break;
}
}
window.onload = orient();
</script>
<body onorientationchange="orient();">
</body>
6. 기본 어플 호출하기
- 전화걸기 : <a href="tel:1588-2120 ">블루웹 고객센터</a>
- 문자보내기 : <a href="sms:010-0000-0000">문자보내기</a>
- 문자보내기실행 : <a href="sms:">문자보내기</a>
7. 아이폰 사파리에서 전화번호 링크를 마음대로 하는 경우가 있는데 이럴 경우
<meta name = "format-detection" content = "telephone=no"/>
하면 자동 링크가 되지 않는다.
8. 1. DOCTYPE
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.wapforum.org/DTD/xhtml-mobile12.dtd">
9. 전체화면 모드
<meta name="apple-mobile-web-app-capable" content="yes">
자바스크립트의 window.navigator.standalone의 결과값(true/false)으로 전체화면 모드 유무를 알 수 있습니다.
10. 홈 화면 아이콘
아이폰의 경우 웹 페이지를 앱처럼처럼 홈 화면에 바로가기를 추가할 수 있습니다. 단순히 아이콘만 설정 가능한 것이 아니라 아이폰의 홈 화면 아이콘들의 공통점인 라운드 박스 효과는 기본적으로 적용되고, 반사광 효과의 적용 유무를 추가로 선택이 가능합니다.
// 반사광 효과를 주는 경우
<link rel="apple-touch-icon" href="home-icon-name.png">
// 반사광 효과가 없는 경우
<link rel="apple-touch-icon-precomposed" href="home-icon-name.png">
apple-touch-icon.png / apple-touch-icon-precomposed.png 의 파일명으로 도메인의 최상위 경로에 올려두면 위의 link 태그를 적용하지 않아도 홈 화면에 추가시 아이콘이 적용됩니다.
11. 상태바 색상 설정
아이폰 상단의 상태 Bar의 경우 3가지 테마를 Meta 태그로 설정할 수 있습니다. 특별한 기능이 있는건 아니지만 디자인을 좀 더 통일성 있게 만들수 있다는 점에서 원하는 색상으로 적용하시면 됩니다.
// 기본 밝은 계열
<meta name="apple-mobile-web-app-status-bar-style" content="default">
// 검정색
<meta name="apple-mobile-web-app-status-bar-style" content="black">
// 반투명 검정색
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12. Splash Screen
스플래시 스크린이란 웹 페이지를 홈 화면에 추가한 후 실행할 때 잠깐동안 로고나 이미지를 보여주고 사라지는 화면입니다. 스플래시 스크린을 추가하는 방법은 간단합니다.
1
<link rel="apple-touch-startup-image" href="startup.png">
해당 이미지의 사이즈가 320 x 460 px 로 맞춰야 하며, 3. 전체화면 모드에서 설명한 apple-mobile-web-app-capable Meta 태그를 적용해야 스플래시 스크린도 적용됩니다.
13. 폰트 사이즈 고정하기
모바일 디바이스의 경우 화면을 가로/세로로 전환할 수 있습니다. 웹킷 기반의 웹 브라우저는 뷰포트의 크기에 따라 폰트 사이즈가 변경되는데 보통 그러한 기능이 화면을 깨트리는 경우가 발생하여 CSS를 이용해 폰트 사이즈를 고정시키기도 합니다.
폰트 사이즈를 고정시키려면 고정시킬 곳에 다음 CSS를 추가하면 됩니다.
1
-webkit-text-size-adjust:none;
-webkit-text-size-adjust – auto | none | N% (default auto)
이상 추가적인 팁들도 있지만 그러한 것들은 차후에 다뤄보도록 하고, 먼저 기본적이고 쉬우면서도 중요하다고 생각되는 팁들을 위주로 정리했습니다.
참고 문헌 :
http://blog.naver.com/nkkim000?Redirect=Log&logNo=100116348607
http://blog.naver.com/fly0ff?Redirect=Log&logNo=140116339554
http://qwerty.kr/wp/
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
0 개의 댓글:
댓글 쓰기