jQuery Mobileに対応したら、文字が小さくなったとき。

jQuery Mobileテスト的にCakePHPで作成しているサイトをスマートフォン対応にしてみました。簡単にjQuery Mobileで作成してみました。CakePHPではコントローラーでPCかスマートフォンかで判定して、ビューのレイアウトやアクションを切り替えてしまいます。この辺りはいずれ書きますので、プログラムに興味がある人は連絡ください。ソースを見せます。とても簡単ですが。

さて、下の方でリンクしているjQuery Mobileの解説本で試ししてみると、どういう訳か実機のAndroid端末で試すと文字が小さくなります。画面の大きさによって文字の大きさを自動的に変えてくれるようです。文字サイズを固定に指定しても無視されます。

jQuery Mobileの1.0のアルファ版(1.0.a2)を使ってみると、期待通りの文字サイズになります。ベータ版(1.0b1)だと文字サイズが小さくなります。もちろん、正式版(1.0)は小さいままです。

正式版になったときバグでも入り込んだ訳もないしと、いろいろ調べてみたら、<head>タグに

[html]<meta name=”viewport” content=”width=device-width,initial-scale=1″>[html]

 

がなかったのが原因でした。解説本をそのままコピーしたのが悪かったようです。その解説本にもコラムに小さく書いてありました。

jQuery Mobileのように新しく開発のスピードが速いものは、紙の解説本よりも最新の情報を見ていく必要がありそうです。

オライリージャパン
発売日:2011-12-22

Flexigridが動かないときの確認事項

jQueryできれいなテーブルをつくってくれるFlexigridですが、突然動かなくになりました。簡単なテストプログラムを書いたりしてみましたが動かない。最後には、ダウンロードしたFlexigridのZIPファイルを再インストールしたりしてみましたが、これでも動かない。

結果は、jQueryのバージョンのでした。一番安全なのは、FlexigridのZIPファイルに含まれているjQueryを使うこと。最新版の1.4.1では動かないのでした。しかし、FlexigridのZIPファイルのjQueryのバージョンは1.2.3なのです。Flexigridが動いてjQueryの新しいバージョンは手元にあるもので1.3.2でした。

そういえばFlexigridの本家のサイトはつながらない。帯域オーバーとでてしまう・・・。

以上、半日つぶれたたぶんこれから忘れるだろう覚え書きでした。

jQueryのrollovers.jsとprototype.jsの競合

現在、外部の会社から出てきたHTMLのコードにCakePHPのAjaxの処理を埋め込むと、メニューの画像がロールオーバーしなくなります。

HTMLを見てみると、rollovers.jsというJavascriptでロールオーバーをしているようです。prototype.jsを読み込むところを削除すると、うまくロールオーバーしてくれます。しかし、Ajaxの処理はしてくれなくなります。

CakePHPでAjaxを実装すると、prototype.jsが必要です。CakePHPの機能を使わずにAjaxの処理を書くのはとても面倒です。では、rollovers.jsを取るか、CakePHPのAjaxを取るかをどちらかにするかと言われればCakePHPのAjaxをとりました。

もっとシンプルにJavascriptでロールオーバーできないかと探したところ、ありました。ここのシンプルロールオーバー

メニューの画像ファイルの命名が

*_o.gif ロールオーバー前

*_h.gif ロールオーバー後

になっていますので、少々修正をするだけでOK。無事にAjaxの処理とメニューのロールオーバーが実現できました。シンプルロールオーバーの作者に感謝です。