Manifest+LocalStorageによるオフラインアプリ作成(2)
HTML+JavaScriptで作った画面は、通常はiPhoneの画面サイズに合わせてリサイズされ、ピンチ操作で拡大すると上下左右にスクロールします。これをネイティブアプリらしくiPhone画面に合わせ、スクロールを上下のみとするか、無効にする方法です。
サンプルはこのURLに置いてあります。
iPhone（およびiPod touch)に合わせて作ってありますが、デスクトップのSafari、Chiromeでも動作の様子を確認できます。Androideでも動作するはずですが、確認していません。（動作報告頂けると幸いです。）
次の点がポイントです。
どちらにも共通の設定
画面の横サイズをデバイスサイズ以下にする
iPhoneの画面サイズはScale=1の場合にwidth=320px, height=480pxですが、heightは状況により異なります。
Scale=1以外の場合はScale後のサイズに合わせます。scale=2であればwidth=640px, height=960pxとなります。
ユーザーによるリサイズを無効にする
次のメタタグを設定します。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
initial-scaleとmaximum-scaleを同じ値にすることでピンチされても画面の拡大、縮小が起こらなくなります。scaleの値は１以外でも構いません。
アドレスバーが表示されない位置に移動する
画面表示時に次のJavaScriptを実行します。
window.scrollTo(0,0);
これは画面固定とは直接関係ありませんが、 アドレスバーが隠れるとよりネイティブアプらしくなります。また、上下方向も固定にした場合は「戻る」ボタンが隠れたままになることがあるため、必ずこれを行うようにします。
画面固定の場合の設定
上下方向も固定にしたい場合はbodyのontouchmoveイベントハンドラで、このイベントを無効にします。これを行うと画面の大きさに関わらず画面スクロールしなくなります。
<body ontouchmove="event.preventDefault()">
この方法では全ての画面でスクロールが無効になります。特定の画面でだけスクロールを無効にしたい場合はフラグを使用して、フラグがtrueのときだけイベントを無効にすればよいでしょう。
<body ontouchmove="event.preventDefault();">
パノラマ写真をiPhoneやiPadを左右にパンして見るアプリです。
自分の周りをぐるりと回すと、臨場感のあるパノラマ写真閲覧ができます。
写真ライブラリの画像を見ることができ、自分で撮影したパノラマ写真を見ることができます。
iCloudにある画像も見ることができます。
視野角度を画像の縦横比較からアプリが設定します。
視野角度は６０°〜３６０°の範囲で調整できます。
ontouchmoveはかなりな頻度で発生するので、パフォーマンスへの影響が気になる場合は必要なときだけイベントハンドラをadd/removeしてください。
ホーム画面にアイコンを置いた場合の画面サイズ調整
ホーム画面にアイコンを置いた場合は、次のメタタグにより全画面表示となり、アドレスバー、ステイタスバーが非表示となります。
<meta name="apple-mobile-web-app-capable" content="yes" />
この場合の画面サイズはステイタスバーのheight=20pxを除き、360px×460pxとなります。
ステイタスバーのスタイルを次のメタタグでblack-translucentとすると、ステイタスバーに隠れる部分も表示領域となり、360px×480pxとなります。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
これに合わせて画面レイアウトを調整したい場合は次の方法で画面サイズをチェックできます。
if (document.documentElement.clientHeight >= 460) {
//ホーム画面時のレイアウト設定
}
デスクトップとの共存
HTMLなのでデスクトップのブラウザでも表示可能です。デスクトップではなにもしなければ左寄せとなります。また右マージンでレイアウトしている場合は画面の幅の変動でレイアウトが崩れることがあります。デスクトップではセンタリングしたい、右マージンもそのまま有効にしたい、という場合はDIVのBOXを組み合わせることでiPhone、デスクトップの両方で同等の表示を行うことができます。
また、こうすることで画面サイズが異なるAndroid端末でもレイアウトが崩れないはずです（未確認）。
<body style="text-align:center;marigin:0px;padding:0px;">
<div style="display:-webkit-box;width:320px;margin:0px auto 0px auto;padding:0px;">
この中にHTMLを書く
</div>
</body>
すばらしい。助かりました。
返信削除iPhoneの勝手な振る舞いに困っておりました。