Re: ヘッダー (ナビゲーションバー) の固定表示

2015年2月21日 著

ヘッダー (ナビゲーションバー) の固定表示という記事を読みました。

PC や比較的画面サイズの大きなタブレットであれば、メインコンテンツの見通しが悪くなる程度で済むかもしれませんが、スマートフォンや小型のタブレットでは、この問題は「致命的」 (コンテンツが実質的に利用できない状態) になり得ます。メインコンテンツ領域を拡大表示したいと思ってピンチ＆ズームをすると、画面の大半がヘッダー領域によって覆い隠されてしまうことがあるのです。

これは非常に思い当たる節があるといいますか、自分もかつて某プロジェクトでヘッダー部分に position:fixed; なスタイルを適用していました。そして上記で指摘されている、画面の大半がヘッダー領域によって覆い隠されてしまうことがあるほかにも、iOS の Safari だとかで非常に問題になったのが、拡大された状態のヘッダーで見切れた部分にアクセスができなくなってしまうという点。ちょうど、What the Virtual Viewport?という記事で紹介されている、Chrome M39まで起きていたことのような状況があったのですよね。

だいぶ昔のことですし、最近はもう普通に position:fixed; しても問題なくなっているのかもしれないと思い、最新のiOSのSafariで（先の「What the Virtual Viewport?」のなかで取り上げられていた）Video.jsのページを見てみたところ、position:fixed; された要素があっても問題ない感じになっていました。うーん、いい時代になったものです（謎）。

まぁこの手の表現に関して言えば、やはりスクリーンサイズの小さなデバイスのことを思えばこそ、「本当に常時表示しなければならないほどの必要性なり利便があるのか？」というのを常に疑いたくなります。スクロールダウンするとそれに従って消えてくれるけど、スクロールアップすると表示が復活するってほう（Hide header on scroll down, show on scroll up -- Medium）が、まだ良さげかなぁ。