반응형

스마트폰 2천만명 시대인 지금은 모바일 웹사이트 코딩은 일반 웹사이트 코딩만큼 하게 되는것 같은데요. 최근 1,2년 사이 웹을 이용할 수 있는 다양한 모바일 기기가 등장하면서 미디어 쿼리를 이용해 다양한 해상도에 반응하는 웹을 구현하는 기술인 반응형 웹까지 만들어지게 되었습니다.

모바일 코딩은 html5와 css3까지 다양하게 사용할 수 있어서 재미있는것 같습니다.

하지만 모바일 웹사이트 코딩을 처음 접하시는 분들은 일반 웹사이트 코딩과 조금은 다른 부분 때문에 난관에 봉착할 때가 있을 것 입니다. 맑은커뮤니케이션에서 조금이나마 도움이 될 수 있기를 기대하면서 기본적인것 부터 정리 해보려구요.

  1. 화면 회전시 폰트사이즈 고정
    body {-webkit-text-size-adjust:none}
    
    페이지가 랜더링될 때 모바일 사파리는 텍스트의 크기를 자동으로 조절하는데, 이때 -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정 또는 원하는 대로 조절할 수 있습니다. css의 body에 적어주면 해결됩니다.
    • auto : 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절
    • none : 폰트사이즈 고정
    • n% : 폰트사이즈를 지정된사이즈로 변경
  2. -webkit-text-size-adjust의 3가지 속성
  3. 모바일 웹페이지를 가로크기에 맞추기
                        
                    
    
    스마트폰에서 랜더링 시켰을경우 터치를 통한 화면의 크기가 변경되지 않아야 하는데, 일반 웹사이트들은 그 크기가 pc에 맞게 제작되었기 때문에 상대적으로 작은 모바일디스플레이로는 감당하기 힘들게 됩니다. 이럴 때 위의 메타태그로 디스플레이 크기에 맞춰질 것입니다.
    • width=device-width : 플랫폼 가로 크기에 맞춤
    • initial-scale : 확대비율
    • maximum-scale : 최대확대비율
    • minimum-scale=1.0 : 최소축소비율
    • user-scalable : 사용자에 의한 화면확대 가능여부 (yes / no)
  4. 웹페이지가 브라우징된 후 주소창을 사라지게 합니다.
    window.addEventListener('load', function() {
    	setTimeout(scrollTo, 0, 0, 1);
    }, false);
    
  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++) pre !="-1)" document.location="링크될 주소" ; < if(uagent.indexof(mobilephones[i])>
    </mobilephones.length;i++)>
  6. 페이지의 전체 백그라운드이미지를 넣을 경우, background-size를 사용합니다. 이 경우는 이미지가 늘어나거나 해도 시각적으로 무리가 없어야 할 것같습니다. 그라데이션등이 있는 bg는 늘어나면 보기 안좋더라구요~
    body {background:url(bg.png) repeat 0 0;
    background-size:100% 100%;}
    
  7. 이미지를 해상도에 맞게 조절하고 싶을 경우에는 max-width를 사용합니다.
    h1 {width:auto;} 
    h1 img {max-width:100%;}
    
  8. width값이 100%인 경우 border 값을 넣으면 가로스크롤이 생겨 버리니 조심해야겠죠.
  9. select, input등에 원치않는 그라데이션과 라운드가 처리되어 있는데, 이 form 요소의 기본속성을 초기화하는 방법입니다.
                        
    border-radius:0px 0px; /* 아이폰의 input 라운드 초기화 */
    -webkit-appearance:none; /* form 요소의 디바이스 기반 스타일 초기화 */
    
  10. html5의 form 요소의 type속성(http://biew.co.kr/18 참고)을 이용한 상황에 맞는 아이폰 자판 레이이웃을 호출할 수 있습니다. (아이폰의 경우입니다.)
                        
    
    
    html5의 새로운 input 속성인 입력값을 설명해주는 placeholder 속성도 활용할 수 있습니다. 이는 웹접근성 지침(http://biew.co.kr/17 참고)에도 표기되어있으며 웹접근성을 높일 수 있습니다.
반응형

+ Recent posts