모바일 코딩시 쓰는 코딩[펌]

자료 출처

http://biew.co.kr/20

---

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

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

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

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

auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절

none : 폰트사이즈 고정

n% : 폰트사이즈를 지정된사이즈로 변경

-------------------------------------

모바일 웹페이지를 가로크기에 맞추기

<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)

--------------------------------------

웹페이지가 브라우징된 후 주소창을 사라지게 합니다.

window.addEventListener('load', function() {

    setTimeout(scrollTo, 0, 0, 1);

}, false);

--------------------------------------

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

  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++)>

--------------------------------------

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

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

--------------------------------------

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

h1 {width:auto;} 

h1 img {max-width:100%;}

--------------------------------------

width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨난다고함

--------------------------------------

select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.

border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */

-webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */

--------------------------------------

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

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