自分用覚え書き @Wiki

Cheat Sheet

最終更新：2013年07月30日 11:45

oboegaki1002

- view

管理者のみ編集可

<h2 class="TableHeading">Resolutions</h2>
<table class="responsivetable">
<thead>
<tr>
<th>Devices</th>
<th>Portrait</th>
<th>Landscape</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Device iPhone5">iPhone 5</td>
<td>640x1136 px</td>
<td>1136x640 px</td>
</tr>
<tr>
<td class="Device iPhone4">iPhone 4/4S</td>
<td>640x960 px</td>
<td>960x640 px</td>
</tr>
<tr>
<td class="Device iPhone3 Subliner">iPhone & iPod Touch <span>1st, 2nd and 3rd Generation</span></td>
<td>320x480 px</td>
<td>480x320 px</td>
</tr>
<tr>
<td class="Device iPad Subliner">Retina iPad <span>iPad 3, iPad 4</span></td>
<td>1536x2048 px</td>
<td>2048x1536 px</td>
</tr>
<tr>
<td class="Device iPad">iPad Mini</td>
<td>768x1024 px</td>
<td>1024x768 px</td>
</tr>
<tr>
<td class="Device iPad Subliner">iPad <span>1st and 2nd Generation</span></td>
<td>768x1024 px</td>
<td>1024x768 px</td>
</tr>
</tbody>
</table>
<h2 class="TableHeading">Displays</h2>
<table class="responsivetable">
<thead>
<tr>
<th>Devices</th>
<th>PPI</th>
<th>Color Mode</th>
<th>Color Temperature</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Device iPhone5">iPhone 5</td>
<td>326</td>
<td>8bit RGB</td>
<td>Warm</td>
</tr>
<tr>
<td class="Device iPhone4">iPhone 4/4S</td>
<td>326</td>
<td>8bit RGB</td>
<td>Cool</td>
</tr>
<tr>
<td class="Device iPhone3 Subliner">iPhone & iPod Touch <span>1st, 2nd and 3rd Generation</span></td>
<td>163</td>
<td>8bit RGB</td>
<td>Warm</td>
</tr>
<tr>
<td class="Device iPad Subliner">Retina iPad <span>iPad 3, iPad 4</span></td>
<td>264</td>
<td>8bit RGB</td>
<td>Warm</td>
</tr>
<tr>
<td class="Device iPad">iPad Mini</td>
<td>163</td>
<td>8bit RGB</td>
<td>Unknown</td>
</tr>
<tr>
<td class="Device iPad Subliner">iPad <span>1st and 2nd Generation</span></td>
<td>132</td>
<td>8bit RGB</td>
<td>Warm</td>
</tr>
</tbody>
</table>
<h2 class="TableHeading">Icons</h2>
<table class="responsivetable">
<thead>
<tr>
<th>Devices</th>
<th class="TheadDouble">App Icon <span> <span>Pixels</span> <span>Radius</span> </span> </th>
<th class="TheadDouble">Appstore Icon <span> <span>Pixels</span> <span>Radius</span> </span> </th>
<th class="TheadDouble">Spotlight Icon <span> <span>Pixels</span> <span>Radius</span> </span> </th>
<th class="TheadDouble">Document <span> <span>Pixels</span> </span> </th>
<th class="TheadDouble">Tab Bar <span> <span>Pixels</span> </span> </th>
</tr>
</thead>
<tbody>
<tr>
<td class="Device iPhone5">iPhone 5</td>
<td class="Splitted"><span>114x114</span><span>20px</span></td>
<td class="Splitted"><span>1024x1024</span><span>180px</span></td>
<td class="Splitted"><span>58x58</span><span>10px</span></td>
<td class="Splitted"><span>44x58</span></td>
<td class="Splitted"><span>60x60</span></td>
</tr>
<tr>
<td class="Device iPhone4">iPhone 4/4S</td>
<td class="Splitted"><span>114x114</span><span>20px</span></td>
<td class="Splitted"><span>1024x1024</span><span>180px</span></td>
<td class="Splitted"><span>58x58</span><span>10px</span></td>
<td class="Splitted"><span>44x58</span></td>
<td class="Splitted"><span>60x60</span></td>
</tr>
<tr>
<td class="Device iPhone3 Subliner">iPhone & iPod Touch <span>1st, 2nd and 3rd Generation</span></td>
<td class="Splitted"><span>57x57</span><span>10px</span></td>
<td class="Splitted"><span>512x512</span><span>90px</span></td>
<td class="Splitted"><span>29x29</span><span>5px</span></td>
<td class="Splitted"><span>22x29</span></td>
<td class="Splitted"><span>30x30</span></td>
</tr>
<tr>
<td class="Device iPad Subliner">Retina iPad <span>iPad 3, iPad 4</span></td>
<td class="Splitted"><span>144x144</span><span>24px</span></td>
<td class="Splitted"><span>1024x1024</span><span>180px</span></td>
<td class="Splitted"><span>100x100</span><span>20px</span></td>
<td class="Splitted"><span>128x128</span></td>
<td class="Splitted"><span>60x60</span></td>
</tr>
<tr>
<td class="Device iPad">iPad Mini</td>
<td class="Splitted"><span>72x72</span><span>12px</span></td>
<td class="Splitted"><span>512x512</span><span>90px</span></td>
<td class="Splitted"><span>50x50</span><span>9px</span></td>
<td class="Splitted"><span>64x64</span></td>
<td class="Splitted"><span>30x30</span></td>
</tr>
<tr>
<td class="Device iPad Subliner">iPad <span>1st and 2nd Generation</span></td>
<td class="Splitted"><span>72x72</span><span>12px</span></td>
<td class="Splitted"><span>512x512</span><span>90px</span></td>
<td class="Splitted"><span>50x50</span><span>9px</span></td>
<td class="Splitted"><span>64x64</span></td>
<td class="Splitted"><span>30x30</span></td>
</tr>
</tbody>
</table>
<h2 class="TableHeading">Commonly used design elements</h2>
<table class="responsivetable">
<thead>
<tr>
<th>Devices</th>
<th>Height of Status Bar</th>
<th>Height of Nav Bar</th>
<th>Height of Tab Bar</th>
<th>Width of Tables</th>
</tr>
</thead>
<tbody>
<tr>
<td class="Device iPhone5">iPhone 5</td>
<td>40px</td>
<td>88px</td>
<td>98px</td>
<td>604px / 1100px</td>
</tr>
<tr>
<td class="Device iPhone4">iPhone 4/4S</td>
<td>40px</td>
<td>88px</td>
<td>98px</td>
<td>604px / 924px</td>
</tr>
<tr>
<td class="Device iPhone3 Subliner">iPhone & iPod Touch <span>1st, 2nd and 3rd Generation</span></td>
<td>20px</td>
<td>44px</td>
<td>49px</td>
<td>302px / 462px</td>
</tr>
<tr>
<td class="Device iPad Subliner">Retina iPad <span>iPad 3, iPad 4</span></td>
<td>40px</td>
<td>88px</td>
<td>98px</td>
<td>dynamic</td>
</tr>
<tr>
<td class="Device iPad">iPad Mini</td>
<td>20px</td>
<td>44px</td>
<td>49px</td>
<td>dynamic</td>
</tr>
<tr>
<td class="Device iPad Subliner">iPad <span>1st and 2nd Generation</span></td>
<td>20px</td>
<td>44px</td>
<td>49px</td>
<td>dynamic</td>
</tr>
</tbody>
</table>