| 모바일 기기 모델명 | 해상도(세로x가로) |
| iPhone 3GS | 480 X 320 |
| iPhone 4, iPhone 4S | 960 X 640 |
| iPhone 5 | 1136 X 640 |
| iPad, iPad 2 | 1024 X 768 |
| New iPad | 2048 X 1536 |
| 갤럭시S, 갤럭시U, 갤럭시K, 갤럭시A, 갤럭시S2 | 800 X 480 |
| 갤럭시S3 | 1280 X 720 |
| 갤럭시탭 | 1280 X 720 |
| 갤럭시 노트, 갤럭시탭2 | 1280 X 800 |
| 옵티머스, 옵티머스Z, 옵티머스Q, | 800 X 480 |
| 옵티머스 마하, 베가, 시리우스, 미라크, 이자르 | 800 X 480 |
| 옵티머스 뷰 | 1024 X 768 |
| 옵티머스G (LG-F180S) | 1024 X 768 |
| 엑스페리아 X10 | 854 X 480 |
| 옵티머스원, 안드로-1, 스마트볼 | 480 X 320 |
| 소니에릭슨 – x10 미니, x10 미니 프로 | 320 X 240 |
| KT Tech – 야누스폰 (KM-S200) | 960 X 540 |
| 모토믹스 (MB501 NEO BLACK) | 480 X 320 |
| 모토로이, 모토쿼티, 모토그램, 디파이 | 854 X 480 |
| Droid RAZR M , RAZR XT910S(K), | 540 X 960 |
| ATRIX™ MB860(861) | 540 X 960 |
| Droid RAZR HD , Droid RAZR MAXX HD | 1280 X 720 |
| 디자이어, 디자이어HD, 넥서스원, 센세이션티 | 800 X 480 |
| EVO 4G+ , Rider | 960 X 540 |
| J Butterfly | 1920 x 1080 |
| 모바일 기기 | 사이즈(가로 X 세로) |
| 아이폰3 & 3GS | 480 X 320 * |
| 아이폰4 & 4S | 480 X 320 * |
| 아이폰5 | 568 X 320 * |
| 뉴 아이패드 | 1024 X 768 * |
| 아이패드2 & 1 & 미니 | 1024 X 768 * |
| 갤럭시S3 | 320 X 640 |
| 갤럭시S2 HD | 360 X 640 |
| 갤럭시S2 & 갤럭시S | 800 X 480 |
| 갤럭시S2 | 533 X 320 |
| 갤럭시노트 | 400 X 640 |
디바이스 해상도 정리
*실제 웹뷰 해상도
아이폰3 – 320 x 480 = 320 x 480
아이폰4 – 640 x 960 = 320 x 480
갤럭시s – 480 x 800 = 320 x 533
갤럭시s II lte HD – 720 x 1280 = 360 x 640
갤럽시탭 7인치 – 600 x 1024 = 400 x 686.6
갤넥 – 720 x 1280 = 360 x 640(* 하단에 물리버튼이 없어 소프트키로 대체되어 그만큼의 영역이 빠지게 된다, 실제 height가 다르다)
갤노트 – 800 x 1280 = 400 x 640
아이패드 – 768 x 1024 = 768 x 1024 status 20 / 748 x 1024
갤탭 10.1 – 800 x 1280 = 800 x 1024 status 48 / 752 x 1280
옵티머스 뷰 – 768 x 1024 = 385 x 514
미디어 쿼리 사용시 device-width가 인식이 잘 안된다. 오케스트라 문제인지 일반 웹페이지로 테스트를 해봐야겠다.
min-width로 해결
min-width:360px -> 갤럭시 넥서스 이상
min-width:400px -> 갤럭시 노트 이상
** meta target-densityDpi=device-dpi 를 설정하면 실제 디바이스 해상도로 설정가능하다.
레티나 대응 responsive 이미지 img태그로, 미디어 쿼리 작업 디바이스 해상도
http://www.mattstow.com/experiment/responsive-images/responsive-images.html
img 태그를 쓰고, img태그에는 spacer 이미지(공백)로 width,height 를 인라인으로 입력하고 속성에 img{background에서 이미지를 호출, background-size:contain;height:auto;max-width:100% }
img 태그에서 width값에 맞게 이미지가 자동으로 변경되며, 미디어 쿼리 사용함에도 해당 디바이스별로 백그라운드 이미지만 교체해줘도 된다.
갤노트등 hd해상도의 안드로이드 단말기때매 미디어쿼리로 추가작업이 들어가게 생겼다.
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/
<link rel="stylesheet" href="ipad-portrait.css"
media="only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)">
<link rel="stylesheet" href="widescreen.css"
media="only screen and (min-width : 1824px)">
<link rel="stylesheet" href="iphone4.css"
media="only screen
and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5)"/* 리퀘스트로 성능저하 우려 *
@media all and (max-width:480px) { .h2{color:#ff0000} }