디바이스별 해상도

 

 

모바일 기기 모델명	해상도(세로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} }

위키http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

 

원문 : http://uxcss.com/wp/index.php/archives/60

출처 :  http://ysd1213.tistory.com/50, http://banisle.tistory.com/category/tip