[Mobile] 고찰.. 시작? 주의사항 모음

1. 해상도를 고려한 레이아웃 

---

모바일 웹사이트 제작은 크기니깐, 조심할것. 

※ 국내 출시된 주요 모바일 기기 해상도

iPhone	320 * 480
iPhone4	960 * 640
모토로이 해상도	854 * 480
HTC 디자이어(넥서스원)	800 * 480
옵티머스Q	800 * 480
갤럭시A	800 * 480
갤럭시S	800 * 480
시리우스	800 * 480
베가	800 * 480

내가 생각할땐 width를 가변폭으로 지정. 탑 메인쪽은 300px 의 헤더 타입 

body는 가변폭으로 해서 유동적인 레이아웃을 생각하는게 가장 좋을듯 싶다. 

모바일 웹페이지는 가로모드와 세로모드에 대응 해야 하고, 해상도가 높은 태블릿 기기에서도 이상이 없도록 해야 한다. 

2. 사용자 편이성

---

사용자가 손가락으로 터치하는 영역은 44px * 44px 가 가장 이상적이단다.  

솔직히 너무 작으면 진짜 터치하기 힘들다.. 

3. 화면 확대 비율 고정 메타 태그  

---

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />

- initial-scale : 기본적인 확대 배율 결정(0.5 설정시 원래 사이즈의 0.5배 크기)

- maximun-scale : 최대 확대 배율 

- minimun-scale : 최소 확대 배율 

- user-scalable : 화면의 확대/축소 가능 여부  , 0이 불가능 1이 가능 

4. 불필요 이벤트 및 자바스크립트 사용 최적화, 

---

모바일에선 마우스의 오버 방식이 아니기 때문에 마우스 over 이벤트는 소용이 없다, 또한 페이지내에 스크롤바 역시 불필요 하다.

디자인시 이미지보단 CSS3를 이용하도록 하자. 

최신 기기 답게 웬만한 모바일 브라우져에서는 CSS3를 다 지원한다 .

이미지를 적게 사용하요 웹페이지의 로딩 속도를 높이자. 

자바스크립트는 간소화 하자. 

5. 개발시 고려사항 !! 

---

기능 구현시

1) 기존 웹사이트의 서비스 중에서 모바일에서 구현 및 이용이 가능하며, 사용자에게 꼭 필요한 기능만 선별.
2) 모바일 디바이스 화면에 맞는 기능 및 컨텐츠 배치
3) 캐쉬 데이터 사용 정책 결정
4) XHTML 페이지 용량
5) XHTML 페이지의 가로, 세로 사이즈
6) 이미지 크기, 용량, 형식
7) 스크롤, 터치, 소프트 키보드 입력 액션을 고려한 UI
8) 전력소모를 줄이기 위한 UI : 화면 메인 색상, 페이지 로딩 요량, 메모리 사용 등
9) 기타 : Active X, Flash, animation-gif 사용금지

지원 기기 선택시

1) 지원한 모바일 디바이스 결정 : Windows Mobile 6.x or 7 , iOS 4.x , Android 2.x ...
2) 지원할 디바이스의 기능에 따른 콘텐츠 제공방식 정책 결정
: 해상도, 가로방향 전환, 터치스크린 여부, H/W 키보드 존재여부, 음성인식 처리 여부, 웹브라우저의 XHTML/JavaScript 호환성
3) 웹사이트 화면에 모바일 디바이스 접근시 처리 : URL 접근 -> 모바일 디바이스 여부/ 기종 판정 -> 모바일 웹으로 자동분기

배포시 

1) 응답성 향상을 위하여 서버 및 기타 서비스용 하드웨어 아키텍처 반영
2) 도메인 분기 정책 결정 및 웹 서버에 정책 반영
3) 모바일 웹사이트 도메인 결정

기타

1) 일반 웹사이트로 가기에 대한 옵션을 제공.

6. 개발 Tip.  

---

1) 레티나 디스플레이 이미지 CSS 고해상도

.myImage {
    height: 40px;
    width: 100px;
    -webkit-background-size: 100px 40px;
    background: url("images/myImage.jpg");
}

@media screen and (-webkit-device-pixel-ratio: 2) {
    .myImage {
    background: url("images/myImage@2x.jpg");
    }
}

2) 화면 사이즈에 맞게 이미지 확대

<style>

img { 

float : left; 

width : 30%; 

-webkit-transition-property : width; 

-webkit-transition-duration : .3s;

}

img.enlargement { width : 100%; }

3) 문서 고정시키기

document.addEventListener("touchmove", function(e) {

e.preventDefault(); 

}

);

4) 가로모드 텍스트 확대 방지

* {

-webkit-text-size-adjust: none;

}

참조사이트 : http://blog.naver.com/kyong94s?Redirect=Log&logNo=129431232