スマホサイトで画面下固定は微妙だっという話


このブログでは2014年2月16日にスマホから接続した時、表示が変わるように設定してあります。この時にメニューが画面下部に固定して表示するようにしたんですが、これが微妙な時があったので共有がてら記録しておきます。

通常時

通常時はメニューが下に張り付いています。この時は特に問題はありません。
スマホ接続時のメニュー位置

Twitterから接続した時の様子

TwitterのURLから自分のサイトへ接続した時はすこし様子が違ってきます。飛んだページからさらに他のページへ遷移した時、サイト内のメニューが上に押し上げられてアプリ(?)UIのページ遷移バーが出現します。
<a href=”http://yukiji.neTwitterから飛ぶと下部にバーが出現する

下へスクロールした時の様子

ページ遷移後、下へスクロールすると下にあった遷移バーがアニメーションで引っ込んでいきます。ただ、サイト内のメニューは置き去りになってしまいました。遷移バーの高さ分だけすき間が空いてしまうのです。他も同じような事象が起きているサイトも見かけました。これを考慮する場合、画面固定は画面上部かサイド配置してFacebookのような横にスライドするUIにするのが正解なのかなと思いました。
バーがあった高さ分すき間が空いてしまう