[모바일] 해상도를 고려한 레이아웃 > 기술자료 | 해피정닷컴

[모바일] 해상도를 고려한 레이아웃 > 기술자료

본문 바로가기

사이트 내 전체검색

[모바일] 해상도를 고려한 레이아웃 > 기술자료

HTML [모바일] 해상도를 고려한 레이아웃

페이지 정보


본문

모바일 웹사이트 제작은 일반 웹사이트 제작과 있어서 가장 큰 차이점은 해상도 차이에 따른 레이아웃입니다.
모바일 기기가 넷북이나, 노트북, 데스크탑 보다도 디스플레이의 크기가 작기 때문에 이점을 고려한 웹사이트 기획 및 디자인, 퍼블리싱이 필요합니다.
게다가 모바일 기기마다 해상도가 제각각이라는 점도 참 난감한 요소지요.
국내에서 보통 모바일 웹사이트 제작은 전 해상도를 고려하기 보다는 최근 출시된 스마트폰을 기준으로 해서 기획, 개발 및 검수 되는 사례가 많습니다.(아이폰, 갤럭시S)
그래서 요즘에는 이들 스마트폰 환경에 최적화된 모바일 웹사이트가 늘어나고 있습니다.


디자인할때  W.320 x H.480 ( iPhone3 )  ~  W.1440 ( G6 ) x H.2960 ( 갤럭시 S8, S8+ )


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

1. 스마트폰 계열
iPhone3, iPhone 3GS : 320 x 480 
iPhone 4 : 640 x 960
iPhone 5 : 640 x 1136
iPhone 6, iPhone 6+, iPhone 7, iPhone 8 : 750 x 1334
iPhone 6+, iPhone 6S+, iPhone 7+, iPhone 8+ : 1080 x 1920
iPhone X : 1125 x 2436

갤럭시 S, S2 : 480 x 800
갤럭시 S3 : 720 x 1280
갤럭시 S4 : 1080 x 1920
갤럭시 S5 : 1080 x 1920
갤럭시 S6, S7 : 1440 x 2560
갤럭시 S8, S8+ : 1440 x 2960
갤럭시 넥서스 : 720 x 1280
갤럭시 U, K, A : 480 x 800
갤럭시 노트II : 720 × 1280
갤럭시 노트 : 800 x 1280
갤럭시 노트 4, 5, 7 : 1440 x 2560
갤럭시 노트 8 : 1440 x 2960

모토믹스 (MB501 NEO BLACK) : 320 x 480
모토로이, 모토쿼티, 모토그램, 디파이 : 480 x 854
Droid RAZR M , RAZR XT910S(K), ATRIX™ MB860(861) : 960 x 540
Droid RAZR HD , Droid RAZR MAXX HD : 720 x 1280

HTC 디자이어(넥서스원) : 480 x 800
디자이어, 디자이어HD, 넥서스원, 센세이션XL : 480 x 800
EVO 4G+ , Rider : 540 x 960
J Butterfly : 1080 x 1920

옵티머스원, 안드로-1, 스마트볼 : 320 x 480
옵티머스, 옵티머스Z, 옵티머스Q, 옵티머스 마하, 옵티머스Q : 480 x 800
옵티머스 뷰 : 768 x 1024
옵티머스G (LG-F180S) : 768 x 1280
넥서스4 : 768 x 1280
G3, G4, G5, V10, V20 : 1440 x 2560
G6 : 1440 x 2880
Q6 : 1080 x 2004

시리우스, 미라크, 이자르, 베가 : 480 x 800
베가레이서2 : 720 x 1280

소니에릭슨 – x10 미니, x10 미니 프로 : 240 x 320
소니에릭슨 아크 : 480 x 854


2. 테블릿 PC 계열

iPad : 1024 x 768
iPad2 : 1024 x 768
iPad mini, Air2 : 1536 x 2048
iPad pro : 2048 x 2732

갤럭시 Tab2 : 1280 x 800
갤럭시 Tab7 : 1024 x 600
갤럭시 Tab10.1 : 1280 x 800

G패드 10.1 : 800 x 1280
G패드 8.3 : 1200 x 1920

write update 2013-10-14
해피정닷컴의 선택 :  갤럭시 S2 최적 사이즈 : 320 x 510
포토샵에서 해상도 96.012Pixels/Inch(기본값) 으로 문서 생성한 상태에서 320 x 510 사이즈로 작업후
스마트폰에서 해당 문서를 오픈하면  480 x 800 으로 열림 , 컴퓨터와 스마트폰의 해상도 표현 방식의 차이때문인듯




참고자료
http://trend21c.tistory.com/946  
http://plannerjs.egloos.com/648393
http://www.couplestyle.com/entry/모바일웹-디바이스별-브라우저-실제-랜더링-사이즈
https://zetawiki.com/wiki/스마트폰_해상도,_화면비율

댓글목록

등록된 댓글이 없습니다.


Total 2,634건 71 페이지
  • RSS
기술자료 목록
1234
JavaScript   34270  2012-10-08 19:47  
1233
JavaScript   37523  2012-10-04 13:49  
1232
JSP   14537  2012-09-27 19:01  
1231
JSP   13233  2012-09-27 16:58  
1230
JSP   16016  2012-09-27 16:32  
1229
JSP   14856  2012-09-27 16:02  
1228
JSP   39920  2012-09-26 14:55 ~ 2017-04-01 00:00  
1227
HTML   15240  2012-09-25 01:51  
1226
그누보드   14349  2012-09-23 06:03  
1225
그누보드   17083  2012-09-20 19:09 ~ 2024-04-03 15:30  
1224
그누보드   11558  2012-09-20 18:56  
1223
그누보드   12790  2012-09-19 18:49  
열람
HTML   21414  2012-09-19 11:58 ~ 2017-09-13 00:00  
1221
JavaScript   15220  2012-09-18 05:44 ~ 2013-07-02 00:00  
1220
그누보드   14831  2012-09-12 16:23  
1219
XpressEngine   17893  2012-09-10 00:32  
1218
.NET   13340  2012-09-09 13:59  
1217
ClassicASP   21212  2012-09-07 19:53  
1216
ClassicASP   18027  2012-09-07 19:38  
1215
JavaScript   28916  2012-09-07 19:33 ~ 2017-12-01 14:36  

검색

해피정닷컴 정보

회사소개 회사연혁 협력사 오시는길 서비스 이용약관 개인정보 처리방침

회사명: 해피정닷컴   대표: 정창용   전화: 070-7600-3500   팩스: 042-670-8272
주소: (34368) 대전시 대덕구 대화로 160 대전산업용재유통단지 1동 222호
개인정보보호책임자: 정창용   사업자번호: 119-05-36414
통신판매업신고: 제2024-대전대덕-0405호 [사업자등록확인]  
Copyright 2001~2024 해피정닷컴. All Rights Reserved.