SundayHacking

iPhoneのWebアプリというのは「ホーム画面に追加する」でインストール、というかブックマーク、するものです。HTML5でもそこそこアプリっぽく作れます。

さて、HTMLのタグで、ズームなどは無効にできます。例えば、次のようにします。

<meta name="viewport" content="width=device-width initial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

ところが、これだけだと、縦にはスクロールできてバウンスしてしまいます。コンテンツの高さがちょうどぴったりだとしてもです。記憶違いでなければ、Androidではそのようなことはなかったような。

検索したところ、stackoverflowがわんさかヒットしました。比較的よくまとまっているかなと思ったのは次の３つ。

http://stackoverflow.com/questions/9651215/how-to-disable-bouncing-in-html5-fullscreen-iphone-app

http://stackoverflow.com/questions/10357844/how-to-disable-rubber-band-in-ios-web-apps

http://stackoverflow.com/questions/7768269/ipad-safari-disable-scrolling-and-bounce-effect

結局、JavaScriptを使わないとできないようですね。fullscreenのサイズで作っておくと、Safariで表示したときは表示エリアが狭くなるのでスクロールが必要です。そこでちょっとだけ工夫をしました。参考までにコードを載せておきます。

document.addEventListener('touchmove', function(e) {
  if (window.innerHeight >= document.body.scrollHeight) {
    e.preventDefault();
  }
}, false);

コンテンツの内部でスクロールやドラッグをしたい場合はさらに工夫が必要かと思いますが、それはまた機会に考えることにします。