본문 바로가기

카테고리 없음

모바일 웹페이지 코딩 팁


찾아 봤지만 한/영 방법은 없는건지 검색에 걸리지 않네요.

http://ebcban.blog.me/30089510273
http://blog.naver.com/cuki00?Redirect=Log&logNo=10100431714

1. HTML5 의 input 태그를 이용한 상황에 맞는 아이폰 자판 레이이웃 호출하기

<input />
<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. 툴바숨기기

 window.addEventListener("load",function(){
  setTimeout(scrollTo,0,0,1);
 },false);


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 : 플랫폼 가로 크기에 맞춤, 수치를넣으면 그수치에 맞게 맞춰짐.

 


 5. 회전에 따라 다른 css 적용하기

  <script type="text/javascript"></script>
 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();