반응형웹사이트는 스마트폰을 위한 디자인입니다.

모바일통합형과는 다소 차이가 있습니다.
통합형의 경우 같은 홈페이지를 모바일기기에서 모바일전용UI 한가지만으로 렌더링합니다.

반응형은 다양한 해상도의 모바일기기에서 해상도에 맞는 리사이즈된 홈페이지를 실시간 렌더링합니다.

반응형웹사이트를 제작하면서 다양한 테마별 특징에서 고려되어야할 체크리스트가 생겼습니다.

 

기본 체크리스트

1. 모바일기기별 해상도
2. 테마별의 해상도별 CSS코딩
3. 테마의 디자인 특성

 

워드프레스 테마 제작자(업체)에서도 반응형테마를 제작할때 웹브라우저의 호환성이외 모바일기기별 호환성테스트를 하고 그것을 공개하겠습니다.

 

@media only screen and (min-device-width: 320px) and (max-device-width: 640px)

꼼꼼한 클라이언트, ?다소 부족한 테마별 지원해상도…

사실 반응형웹사이트를 제작할때 다양한 기기에서 테스트를 하지는 못합니다.
웹브라우저의 해상도에 의존하고 있고, 조금더 확인 할때는 기기에서 직접테스트하거나
모바일 에뮬레이터를 사용합니다.

 

반응형웹사이트를 위한 테스트

1. 브라우저별 해상도테스트 (IE, Chrome)
2. 모바일 에뮬레이터

 

구글 앱스토어 모바일 에뮬레이터

 

스마트기기의 기기별 해상도

iOS

• 320 x 480?: 아이폰 3
• 640 x 960?: 아이폰 4
• 640 × 1136?: 아이폰 5
• 768 x 1024?: 아이패드1, 아이패드2, 아이패드 미니
• 1536 x 2048?: 아이패드3, 아이패드4

???

안드로이드

• 480 x 800?: 갤럭시S, 갤럭시S2, 옵티머스 2X, Nexus S, Nexus One, HTC Desire HD, HTC Desire HD2
• 800 x 1280?: 갤럭시탭 10.1, 갤럭시노트1,?넥서스 7
• 720 x 1280?: 갤럭시S3, 갤럭시S2 HD, 갤럭시노트2, 옵티머스G
• 1200 x 1920?: 넥서스 7(2013)
• 1080 x 1920?: G2, 갤럭시S4, 갤럭시노트3

????