15. Getting Started Mobile Web UI Design
스마트폰과 테블릿PC의 Icon Size Guide
114 110 72
72
114
55
[ iPhone4 ] [ iPhone4 ]
[ iPad ]
APP Store Icon Application Icon Spotlight Search Result and Setting Icon Document Icon
320 x 320 (iPad)
114 x 114 (iPhone 4) 58 x 58 (iPhone)
64 x 64 (iPad)
512 x 512 57 x 57 (Older iPhones) 50 x 50 (Spotlight results for iPad)
44 x 58 (iPhone4)
72 x 72 (iPad) 29 x 29 (Setting for iPad and older iPhones)
22 x 29 (older iPhones)
16. Getting Started Mobile Web UI Design
Top bar
44px
Touch
Table view
Touch 42px
Tab bar
49px
Safari bottom
44px
21. Getting Started Mobile Web UI Design
iPhone 3G/
HTC Magic
302 x480
iPhone 3G 3,5”
163 ppi
Galaxy Tab
640 x 960
iPhone 4 3,5”
326 ppi
iPad/
iPad2 1024 x 768
iPad/iPad 2 9,7”
Google
Nexus One 132 ppi
480 x 800
Google Nexus One 3,7”
254 ppi
iPhone 4
320 x 480
HTC Magic 3,5”
181 ppi
1024 x 600
Galaxy Tab 7”
171 ppi
23. Getting Started Mobile Web UI Design
Using Conditional CSS
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/Optimizingfor
SafarioniPhone/OptimizingforSafarioniPhone.html#//apple_ref/doc/uid/TP40006517-SW1
24. Getting Started Mobile Web UI Design
Using Conditional CSS
http://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
<link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css">
<link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/medium.css">
<link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css">