jQuery mobileを使ってハマったところ

ここのところスマートフォン用のページを作る機会が増えてきて、jQuery mobileを触る機会が増えてきました。
jQuery mobileを使ってページを作成するのは非常に楽ですが、スマートフォン向けの便利なイベントも用意されていることも忘れてはいけません。
これによりCarouselやSliderの実装などを楽に行うことができます。

しかし、全てのスマートフォンで同じ動きができるとは限りません。
ここでは、私が実際にjQuery mobileを触ってみてつまづいた点などをメモしておきます。

対象スマートフォン・ブラウザ・バージョンに気をつける

サポートしてるブラウザについてはこちらにまとめてありますが、iOS3.1.3とiOS4が共に「A」でもiOS3.1.3のほうが弱冠、動作に安定感がありません。
Androidのように端末の種類が多いとより動作に誤差が生じる場合があると思うので気をつけましょう。

data-rel=”dialog”のリンク先のhtmlで2バイト文字が使えない?

と思ったらDreamweaverの設定でした。
Dreamweaverでhtmlを新規作成するとデフォルトでは、

  • エンコーディング:UTF-8
  • Unicode正規化フォーム:C(標準分解の後で標準合成を適用)

に設定されてます。(メニューの「修正→ページ設定→タイトル/エンコーディング」より確認できます)
Unicode正規化フォームを「なし」に設定して保存すると正しく表示されます。

新規作成時の設定を変更したい場合は、メニューの「編集→環境設定→新規ドキュメント」で変更することができます。

tapは二度反応する

var cnt = 0;
$('div#hoge').bind('tap',function(){
  $(this).html(++cnt + '回タップされました');
});

このコードを見て、div#hogeをtapすればcntの数字が1ずつ増えるんだろうなぁと簡単に予測することができると思います。
では下記リンクにPCのWebKit系ブラウザ・スマートフォンブラウザ両方でアクセスしてみてください。


デモ

PCのChromeやSafariでは正常に動作しますが、スマートフォン側では数字が2ずつ増える(押して+1、離して+1)のが確認できたと思います。
これを回避するにはjQueryにあるclickで代用することができます。

var cnt = 0;
$('div#hoge').click(function(){
  $(this).html(++cnt + '回タップされました');
});

AndroidでjQuery mobileのorientationchangeイベントが発行されない

jQuery mobileのorientationchangeは端末の縦持ちと横持ちが切り替わるごとに関数を実行させることができます。
が、Androidではこのイベントが発行されません。(少なくともAndroid 2.3 Galaxy Tab・Android 2.2 Motorola Milestone2・Android 2.1 Xeperiaでは)ちなみにiOS3.1.3でも駄目でした。

$('div').bind('orientationchange',function(){
  $('div#hoge').html(window.orientation);
});

これを回避するにはwindow.onorientationchangeで代用することができます。
ちなみにAndroid 2.1 Xeperiaで非対応。Android 2.2 Motorola Milestone2・Android 2.3 Galaxy Tabで対応しているので、Android 2.2からでしょうか。

window.onorientationchange = function(){
  $('div#hoge').html(window.orientation);
}


デモ(向きの固定ロックを解除しておいてください)

CSS3のプロパティを使用したものにエフェクトをつけると重い

主にbox-shadowなんかを使っている要素を動かすときに重いです。


デモ
(対象物が小さいのでほとんど変わらない…)

対応としては、実装したものの最適化やどうしても無理なら画像化して背景画像にしてしまいましょう。
jQueryの最適化についてはこちらがとても参考になりました。

jQueryを良くする25のTIPS[to-R]

使うのはとても簡単なjQuery Mobileですが、まだ思わぬ落とし穴も多いので気をつけて使っていきましょう!

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ