Post

참고,출처 : http://www.lightsphere.com/dev/articles/design_for_iphone.html
                http://html.nhndesign.com/blog/category/90




처음으로 모바일용 페이지를 작업하면서 알게 된 내용들입니다.
제 경우엔 아래 네가지 사항이 필수사항이었는데,
모든 모바일용 페이지에서도 아래 사항들이 전부 꼭 필요한 사항들인지는 잘 모르겠네요 ^^;;

아무튼,, 본인은 사용하지도 않는 스마튼폰 때문에 며칠동안 맘고생,몸고생은 혼자 다 했네요 ㅠㅅㅠ
(억울하면 너도 스마트폰 사든가~~라고 말하시면 상처받아요 ㅋㅋ 가난해서 스마트폰은 커녕 터치폰도 제대로 못써본 1人~)
' 자랑이다.. -ㅅ-;;; '

추가로 알아내는 내용들이 있으면 계속 업데이트할께요~
혹시 제가 적은 내용 중에 잘못되거나 더 알아야 할 내용들을 아시는 분 계시면 댓글로 알려주시면 정말정말 감사하겠습니다~~
아시는 분은 짧게라도 댓글 달아주시면 제가 더 검색해보고 공부할테니까 절대로 그냥 지나치심 안돼요~~ ㅎㅎ




  • 별도의 css를 따로 만드는 것을 권장.


  • ★ meta태그로 장치의 해상도 설정에 대한 내용 추가.

      <meta name="viewPort" content="initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scale=no;" />


  • ★ css에 전체 기본스타일로 아래내용 추가.

       * {-webkit-text-size-adjust:none;}

       (이건, 무슨 의미인지 잘 모르겠네요 ^^; 다른 모바일페이지들에 공통적으로 사용된게 있길래 무작정 긁어다 썼는데..)



PC에서 모바일브라우저 테스트하기

[파이어폭스]
부가기능 설치 : https://addons.mozilla.org/ko/firefox/addon/59 , https://addons.mozilla.org/ko/firefox/addon/967
MIME-TYPE 설정 : https://addons.mozilla.org/ko/firefox/addon/1345

[사파리]
브라우저 기본설정에서 개발자용 메뉴 보기 체크.
웹사이트 이용 : http://iphonetester.com



참고 모바일페이지

http://m.news.naver.com , http://m.daum.net


▲ top