iPhone や iPad の画面サイズ早見表 : iPhone プログラミング
PROGRAM
.auto-style2 {
color: #FA3C3C;
}
div#iphone-layout-canvas
{
border: 3px #6060A0 double;
margin: 12px;
padding: 8px;
display: table;
}
div#iphone-layout-fullsize-label
{
border: 3px #6060A0 double;
margin: 12px;
padding: 8px;
text-align: center;
font-weight: bold;
font-size: 13px;
line-height: 13px;
}
div#iphone-layout-component-palette
{
}
div#iphone-layout-component-palette-for-top
{
display: inline-block;
}
div#iphone-layout-component-palette-for-bottom
{
display: inline-block;
}
span.iphone-layout-selector
{
margin-right: 16px;
}
span.iphone-layout-selector input
{
margin-left: 0px;
margin-right: 8px;
}
div.iphonelayoutcomponent
{
display: table-row;
font-size: 13px;
line-height: 13px;
margin: 0px;
padding: 0px;
}
div.iphonelayoutcomponent_insideView
{
border: 1px #C0C0F0 solid;
/* margin-bottom: -2px; */
text-align: center;
vertical-align: middle;
display: table-cell;
margin: 0px;
padding: 0px;
}
div.iphonelayoutcomponent_title
{
font-weight: bold;
float: left;
padding-left: 12px;
}
div.iphonelayoutcomponent_size
{
float: right;
padding-right: 12px;
}
div.iphonelayoutcomponent_nonRetinaSize
{
}
div.iphonelayoutcomponent_retinaSize
{
}
div.iphonelayoutcomponent_View
{
background-color: #EEEEEE;
}
div.iphonelayoutcomponent_StatusBar
{
background-color: #F2BA8D;
}
div.iphonelayoutcomponentStatusBar div.iphonelayoutcomponentnonRetinaSize
{
float: left;
}
div.iphonelayoutcomponentStatusBariphonelayoutcomponentretinaSize
{
}
div.iphonelayoutcomponent_NavigationBar
{
background-color: #BAD2E6;
}
div.iphonelayoutcomponent_NavigationBarWithPrompt
{
background-color: #D2E2EE;
}
div.iphonelayoutcomponent_ToolBar
{
background-color: #EAEEDA;
}
div.iphonelayoutcomponent_TabBar
{
background-color: #CED6AA;
}
HASH(0x7fac8c9bb3e0)
iPhone や iPad の画面サイズ
iPhone や iPad でコントロールをレイアウトしようと思ったときに、どこからどこまでが何ピクセルとかわからなくなることが多かったので、画面サイズの早見表を作ってみました。
また、条件を選択して行くとそのときの画面サイズが表示されるものも用意してみました。
iPhone の画面レイアウト
画面サイズ | |
---|---|
デバイスの向き | |
画面の密度 |
上部コンポーネント |
---|
下部コンポーネント |
---|
画面サイズ早見表
iPhone 5
iPhone 5 なら必ず Retina ディスプレイになりますけど、開発時は通常ピクセルでのレイアウトを行うことが多いので、通常と Retina の両方を載せておきます。
iPhone 5 でも横幅は変わらないので、横のサイズについては iPhone 4S 以前の表をご覧ください。
iPhone 4S まで
2013/07/03 iPhone 横レイアウトの図表で、NavigationBar, NavigationBar WithPrompt, ToolBar の高さが間違っていたので修正しました。
iPad の画面レイアウト
画面レイアウトについての補足
基本的に iPhone 4S まででは、横が 320px の縦が 480px で、iPad では横が 768px の縦が 1024px です。Retina ディスプレイの場合はその倍の、iPhone なら横が 640px の縦が 960px で、iPad なら横が 1536px の縦が 2048px になります。
iPhone 5 からは、画面が 4 インチになった都合、縦に 88px(Retina の場合は 176px)拡張されました。横サイズは変わりません。
iPhone では、縦よりも横の方が NavigationBar と ToolBar の高さが小さくなります。
iPad では、縦でも横でも高さは変わらないようです。
[ もどる ]