2013年2月8日金曜日

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



iPhone5の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">

4インチ画面の場合だけこの設定にするためには、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を訪問してみてください。


0 件のコメント: