safari / iPhone5のホーム画面スクリーンサイズ

iPhone５のsafariの画面をホーム画面におくと、スクリーンサイズが360x480になってしまう場合があります。これはそう遠くないうちに改善されると思いますが、当面の対策がBreaking the Mobile Webに紹介されていました。

ポイントはmetaタグで width=device-width または width=32 が設定されているとスクリーンサイズが360x480に設定されてしまうということで、次のように替えることで回避できます。

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=320.1">

４インチ画面の場合だけこの設定にするためには、2行目について次のJavaScriptで適用します。

if (window.screen.height==568) { // iPhone 4"
    document.querySelector("meta[name=viewport]").content="width=320.1";
}


この他iOS 6のHTML、CSS関連の情報が多く紹介されているのでBreaking the Mobile Webを訪問してみてください。

Manifest+LocalStorageによるオフラインアプリ作成

HTML5+JavaScriptでiPhoneでスクロールしない画面を作る方法

HTML5+JavaScriptで画面をスライドさせて切り替える方法

HTML5+JavaScriptによるSwipeの実装例

HTML5+JavaScriptによるパノラマ写真実装例

localStorageの実装例

Cache Manifest使用時のXMLHttpRequest

Cache Manifestを無効にする方法

3D Translateの実装例

3D Translate実装例(2) Diceについて