JQuery Mobile フッター固定について

スマホサイトを作成にあたり、
フッターを固定してナビとして使用したく、
いろいろテストをしてみました。

最初はPCと同様にposition fixedを使ってみました。
このときチェックしたのは、Android2.3とios5でどちらも、
正常に表示されていました。

ところが、Android1.6と2.1をAndroid SDKで確認しところ、
見事にフッター固定できませんでした。

調べてみたところ、
iosでも5になってからposition fixedが効くようになったようで、
Androidでは2.2以降が有効なようです。
※Android SDKでの確認なので、機種によっては動作が異なるかもしれません。

古い機種は切り捨てたいとこですが、
そこそこユーザーもいるため、無視できず他の方法を探しました。

この話題はちょっと前に盛り上がっていたようで、
いろいろと考察されていました。

行き着いたのは下記2つ
■JQuery Mobileの利用
http://jquerymobile.com/

■iScrollというJSのプラグインの利用
http://cubiq.org/iscroll

今回選択したのはJQuery Mobileです。
iScrollはヘッダー・フッターとも固定するので、
今回は採用しませんでした。
どちらかの固定もできるのかもしれませんが、
そこまで解析するのも手間も時間もかかりそうだったので・・・

JQuery Mobileでのフッター固定は簡単で、
まず指定のcssとjsを読み込み、
固定したいフッターのタグを下記のようにします。

<footer data-role="footer" data-position="fixed">
<nav>
<ul>
 <li>ナビ1</li>
 <li>ナビ2</li>
 <li>ナビ3</li>
</ul>
</nav>
</footer>

JQuery Mobileではこの設定で、
スクロール時には自動でフッターが消え、
スクロールが終了した時点でフッターが再表示されます。
また、画面をタップするだけでも自動でフッターが消え、
もう一度タップすると再表示されます。

ただ、今回は常にフッターを表示させていたいと考えていたので、
ちょっと設定が必要でした。
JQuery MobileのJSファイルを読み込む手前で、
下記のJSを設定します。
$.mobile.fixedToolbars.setTouchToggleEnabled(false);

これでできた!と思ったのですが、
問題がでてきました。

自前のスマホXperia(SO01-B)だと大丈夫だったんですが、
Galaxy SIIで確認したところ、タップの反応が良すぎるのか、
フッターのリンク部分が反応しなくなりました。
これは使えないと思ったので、元の設定に戻しました。

ちなみに元の設定戻しても、Galaxy SIIでの反応は微妙でした。
だいぶましになりましたが・・・

とりあえずこの設定でやることにしたんですが、
もう一つ問題がでてきました。
これは次回へ。
次回書くときに解決していることを願っています。

コメントを残す