5丁目通信(仮称)

とある5丁目で活動する還暦を過ぎたWebプログラマーの覚え書きです。それとかかってくる迷惑電話や、家業のアパート経営について。

jQuery Mobileに対応したら文字が小さくなったときの対応をした話し


jQuery Mobile

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

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

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

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

<meta name="viewport" content="width=device-width,initial-scale=1">

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

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

著:山田祥寛
¥3,366 (2024/11/21 16:43時点 | Amazon調べ)
著:松浦 健一郎, 著:司 ゆき
¥2,574 (2024/11/21 16:43時点 | Amazon調べ)
著:谷藤賢一, 著:徳丸浩
¥2,750 (2024/11/21 16:43時点 | Amazon調べ)