[아이폰용 모바일웹 제작 팁]
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/
댓글
댓글 쓰기