イナヅマTVログ

Memo, mobile Safari各パーツサイズ

| 0件のコメント

iOS(iPhone)の各パーツサイズ メモ
【Normal】
Status bar: 20px
URL text field: 60px
Button bar: 44px

【Keyboard】
キーボードが表示された時
Status bar: 20px
URL text field: 60px
Form assistant: 44px
Keyboard: 216px(Portrait), 162px(Landscape)
Button bar: 44px(Portrait), 32px(Landscape)

【Display】
スクリーンサイズ
iPhone 4s under
320px x 480px

iPhone 5
320px x 568px

・表示可能領域
【Normal】
iPhone 4s under
320px x 356px

*hide URL text field
320px x 416px

iPhone 5
320px x 444px

*hide URL text field
320px x 504px

【Standalone mode(Full Screen)】
iPhone 4s under
320px x 460px

iPhone 5
320px x 548px

【meta】Standalone mode
Full screen指定
iOS 2.1 later

<meta name="apple-mobile-web-app-capable" content="yes">

default: no
yes, no

Status bar
iOS 2.1 later

<meta name="apple-mobile-web-app-status-bar-style" content="black">

default: default
default, black, black-translucent

【Web クリップ アイコン】Web Clip Icon
iPhone
57 x 57, 114 x 114(高解像度)
iPad
72 x 72, 144 x 144(高解像度)

四角形のアイコンを作成(PNG)
角丸、ドロップシャドウ、反射光 はiOS側で設定される

画像名を apple-touch-icon-precomposed.png とすると上記3つの効果を付けない。

【関連投稿】
Memo, [iOS][mobile Safari]フルスクリーンに対応させるmetaタグやスプラッシュ画像の指定
Memo, iOS, Androidブラウザのアドレスバーを消す方法

コメントを残す