모바일 웹페이지 코딩 팁

1. 화면 회전시 폰트사이즈 고정

   1	body {-webkit-text-size-adjust:none}

   페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.

   -webkit-text-size-adjust의 3가지 속성

   • auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
   • none : 폰트사이즈 고정
   • n% : 폰트사이즈를 지정된사이즈로 변경
2. 모바일 웹페이지를 가로크기에 맞추기

   1	<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">

   스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 pc에 맞게 제작되었기 때문에 상대적으로 작은 모바일디스플레이로는 감당하기 힘들게 됩니다. 이럴 때 위의 메타태그로 디스플레이 크기에 맞춰질 것입니다.

   • width=device-width : 플랫폼 가로 크기에 맞춤
   • initial-scale : 확대비율
   • maximum-scale : 최대확대비율
   • minimum-scale=1.0 : 최소축소비율
   • user-scalable : 사용자에 의한 화면확대 가능여부 (yes / no)
3. 웹페이지가 브라우징된 후 주소창을 사라지게 합니다.

   1 2 3

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

4. 스마트폰으로 접속시 해당 모바일 웹페이지로 자동 링크됩니다.

   1 2 3 4 5

   var uAgent = navigator.userAgent.toLowerCase();         var mobilePhones = new Array('iphone','ipod','android','blackberry','windows ce',         'nokia','webos','opera mini','sonyericsson','opera mobi','iemobile');         for(var i=0;i<mobilephones.length;i++) if(uagent.indexof(mobilephones[i])="" !="-1)" document.location="링크될 주소" ;="" <="" pre=""> </mobilephones.length;i++)>

5. 페이지의 전체 백그라운드이미지를 넣을 경우, background-size를 사용합니다. 이 경우는 이미지가 늘어나거나 해도 시각적으로 무리가 없어야 할 것같습니다. 그라데이션등이 있는 bg는 늘어나면 보기 안좋더라구요~

   1	body {background:url(bg.png) repeat 0 0;background-size:100% 100%;}

6. 이미지를 해상도에 맞게 조절하고 싶을 경우에는 max-width를 사용합니다.

   1 2	h1 {width:auto;} h1 img {max-width:100%;}

7. width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨 버리니 조심해야겠죠.
8. select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.

   1 2	border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */ -webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */

9. html5의 form 요소의 type속성(http://biew.co.kr/18 참고)을 이용한 상황에 맞는 아이폰 자판 레이이웃을 호출할 수 있습니다. (아이폰의 경우입니다.)

   1 2 3 4 5 6 7 8 9

   <input type="email"> <input type="url"> <input type="time"> <input type="date"> <input type="datetime"> <input type="number"> <input type="tel"> <input type="search"> <input type="week">

   html5의 새로운 input 속성인 입력값을 설명해주는 placeholder 속성도 활용할 수 있습니다. 이는 웹접근성 지침(http://biew.co.kr/17 참고)에도 표기되어있으며 웹접근성을 높일 수 있습니다.

source : http://biew.co.kr/20