読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

apple-mobile-web-app-capableにする際のiPhone5対応

ビューポートでwidthにdevice-widthもしくは相当の数字(320)を設定すると、「ホーム画面に追加」した際に、iPhone5だとフルスクリーンにならずに互換モード表示になります。

<meta name="viewport" content="width=device-width, ..." />

width指定は使わないようにしましょう。
widthはウェブページのレンダリング幅の指定なので、initial-scale=1にしておけば、100%=320pxになります。

例えば以下のように指定するとiPhone5でもフルスクリーンになります。

<meta name="viewport" content="initial-scale=1, ..." />

http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers

追記:
iOS 7ではwidth=device-widthを指定しても、フルスクリーンになりました。