iPad専用サイトの構築中にあった挙動の調整

ページ左側にメニューバーを display: fixed; で固定します。

html,body {
    height: 100%;
}
.menu {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    width: 75px;
    height: 100%;
    background: #fff;
}

safariでは、上下にスクロールするとアドレスバーとタブバーが消える仕様なのですが、この消える時に画面の高さ100％の値が変わるため、下側に余白が発生してしまいます。

そこで、アドレスバーとタブバーを動かさず、高さを変えないようにCSSで調整します。

html,body {
    height: 100%;
    overflow: hidden;
}
body {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}

CSSでMac版Chromeなどの領域外スクロール（バウンススクロール）を無効にする | ITハット

上記設定をすることで、慣性スクロールがなくなり、もっさりした重い感じのスクロールになってしまいます。
そこで、bodyタグに下記を追加します。

body {
    -webkit-overflow-scrolling: touch;
}

-webkit-overflow-scrollingと慣性スクロール – メモログ

これで固定する前のスムーズなスクロールになります。

アドレスバーとタブバーを消したい場合には、スタンドアローンアプリのように見せるように下記タグを追加します。

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="アイコンタイトル">
<link rel="apple-touch-icon-precomposed" href="images/apple-touch-icon-precomposed.png">

iPadなどのタブレット端末やスマートフォンでスタンドアローンのアプリのように見せるための方法 – MovableType.net 活用ブログ