|
스마트폰 2천만명 시대인 지금은 모바일 웹사이트 코딩은 일반 웹사이트 코딩만큼 하게 되는것 같은데요. 최근 1,2년 사이 웹을 이용할 수 있는 다양한 모바일 기기가 등장하면서 미디어 쿼리를 이용해 다양한 해상도에 반응하는 웹을 구현하는 기술인 반응형 웹까지 만들어지게 되었습니다.
모바일 코딩은 html5와 css3까지 다양하게 사용할 수 있어서 재미있는것 같습니다.
하지만 모바일 웹사이트 코딩을 처음 접하시는 분들은 일반 웹사이트 코딩과 조금은 다른 부분 때문에 난관에 봉착할 때가 있을 것 입니다. 조금이나마 도움이 될 수 있기를 기대하면서 제가 격었던 부분들을 기본적인것 부터 정리 해보려구요.
화면 회전시 폰트사이즈 고정
body {-webkit-text-size-adjust:none}
페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.
-webkit-text-size-adjust의 3가지 속성
auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
none : 폰트사이즈 고정
n% : 폰트사이즈를 지정된사이즈로 변경
모바일 웹페이지를 가로크기에 맞추기
스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 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
페이지의 전체 백그라운드이미지를 넣을 경우, 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 요소의 디바이스 기반 스타일 초기화 */
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 참고)에도 표기되어 있으며 웹접근성을 높일 수 있습니다. | 
REVIEW
