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

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

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

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

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

 

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

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

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

 

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください