Android4.2系で[position:fixed;]ではヘッダーが固定されない

スマートフォンサイトで便利な『ヘッダーの固定』。
ナビゲーションを固定することで離脱率を防ぐ狙いが有り、お客様から求められることも多い仕様です。
ヘッダーの固定は、一般的に[position:fixed;]が用いられることが多いかと思います。

#sPhoneHeader {
	display: block;
	position: fixed;
	height:50px;
	z-index: 99999;
}

一応、iOSは5～、Androidは2.2～で[position:fixed]に対応していることになっています。
1pxでもスクロールしないとfixedが有効にならない等、細かなバグのようなものはありますが、基本的には固定出来ますし、問題のAndroid4.2系でもChromeは固定できていたという状態です。

Android4.2系の『デフォルトブラウザ』が問題？

ところが。
『Android4.2系の『デフォルトブラウザ』』ではどうも固定されないらしい。
それも、固定されないばかりでなく、ページの真ん中あたりにとどまってしまったりする、ゆっくり動かせばfixしている…と見せかけて唐突にジャンプ、など、かなり奔放。
Android SDKを使っていくつかのバージョンを確認してみましたが、どうも4.2系でのみ発生する現象らしいことが分かりました。

Android4.2系を使っているユーザーは結構多い

改めてGoogle Analyticsを確認してみると、Android4.2系は結構多い。
弊社が管理しているサイトの幾つかでは、4.2系が一番多かったほど。
Android5.0が出たばかりで、4.2のリリースが2012年11月だったことを考えると、「そろそろ買い替え時期かな～」といったところでしょうか。

mobile-jQueryで対応する

見過ごせない数のユーザーがいることが分かりましたので、jQuery Mobileで対応することにしました。。

上記のリンク先で以下の３つにチェックを入れて、
Toolbars: Fixed
Toolbars: Fixed: Workarounds
Toolbars: Fixed
ページ最下部の「Build my download」ボタンを押します。

続いて、先程DLしたファイルをアップロード＆読み込み。
固定したい要素にdata-role=”header”とdata-position=”fixed”を追加。（今回はヘッダーだけ固定できれば良いのでその他の要素にはノータッチです）

～

これで無事にヘッダーが固定されるようになりました。

以上で対応完了となります。

今回のように「Android特定バージョン対応」をお客様からご相談いただくケースも少なくありません。

スマートフォンサイトをメインに稼働されているお客様も多いことから、Google AnalyticsでのスマートフォンのOSのバージョン別割合は定期的にご確認いただく事をお勧めいたします。Android端末の実機検証等、ご対応が難しい場合にはご相談いただけますようお願いいたします。