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>
- 메일보내기실행 : <a href="mailto:">메일보내기</a>
- 메일보내기 : <a href="mailto:echos@blueweb.co.kr">메일보내기</a>
- 내용채워서 메일보내기 : <a href="mailto:echos@blueweb.co.kr?cc=echos@blueweb.co.kr&bcc=echos@blueweb.co.kr&subject=test subjct&body=test body"">메일보내기</a>
'Mobile' 카테고리의 다른 글
| 모바일웹의 모든 것 (0) | 2011.12.28 |
|---|---|
| JS와 jQuery의 window,document 위치/크기관련 프로퍼티 비교 (0) | 2011.12.15 |
| 이동 태그 모음 (0) | 2011.12.15 |
