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

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

본문 바로가기

사이트 내 전체검색

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

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,641건 1 페이지
  • RSS
기술자료 목록
2641
그누보드   216  2024-11-26 21:14 ~ 2024-11-26 21:22  
2640
그누보드   244  2024-11-22 10:52 ~ 2024-11-22 11:03  
2639
호스팅   244  2024-11-19 14:41 ~ 2024-11-19 21:17  
2638
Linux   194  2024-11-18 15:45 ~ 2024-11-18 15:48  
2637
일반   187  2024-11-15 16:45 ~ 2024-11-15 16:46  
2636
Secure   215  2024-11-06 18:48 ~ 2024-11-06 18:50  
2635
영카트   378  2024-10-21 13:44 ~ 2024-10-21 19:42  
2634
전자결제   800  2024-09-05 09:30  
2633
MySQL   1030  2024-03-29 14:14 ~ 2024-03-29 14:14  
2632
그누보드   1267  2024-02-23 18:40 ~ 2024-02-24 06:13  
2631
JavaScript   1371  2024-02-16 18:50 ~ 2024-02-16 20:37  
2630
Java   1330  2024-02-06 16:49  
2629
PHP   1530  2024-02-06 16:42  
2628
호스팅   1437  2024-01-29 12:54  
2627
PHP   1386  2024-01-26 11:04 ~ 2024-01-26 11:13  
2626
MySQL   1552  2024-01-08 17:37 ~ 2024-03-14 16:00  
2625
SQL   1738  2024-01-08 12:36  
2624
영카트   1779  2024-01-04 14:57  
2623
일반   2652  2023-12-15 18:33  
2622
Android   2125  2023-11-30 18:48 ~ 2023-11-30 19:41  

검색

해피정닷컴 정보

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

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