なんじゃくにっき

クロスブラウザ対応スマートフォンサイトを作る際のバッドノウハウ的な何か

Q1 AndroidでJavaScript動かない！助けてママン！

A1 たまによく読み込んでくれないことがあります。そっとリロード。

　それでも解決しなければQ2へ。

　

Q2 動け！動くんだJavaScript！

A2 変な文字入ってない？全角スペースとか混じってると起こりやすいです。

　

Q3 AndroidでJavaScript動いたけど文字化けしまくるんだけど・・

　文字コードは全部UTF-8だしヘッダにも文字コード指定してるのに・・

A3 ベーシック認証下だと何故かこの現象が起こります。

　http.confにそっと以下の一行追加。

AddType "application/x-javascript; charset=UTF-8" .js

参考：http://www.rottel.net/kuwa/124700

　

Q4 まだAndroidでJavaScript文字化けするんだけど？

A4 jQuery.ajax()で同期モードにしてると起こることがあるようです。

　非同期モードで試してみましょう。

　

Q5 Windows PhoneでJavaScript動かん。なぜだ？なぜ動かん？

A5 buttonとかのアクションの後にreturn false;を付けてあげると幸せになれるかも。

<button onclick="hoge();" />

　　　　↓

<button onclick="hoge();return false;" />

　

Q6 favicon出ない or 変な画像になる

A6 Basic認証下だとAndroid端末でfaviconに鍵マーク付いたり、iOS5だとfavicon出なかったりする。

　Basic認証外して下さい。

　

Q7 Windows PhoneでAタグでジャンプしない！

A7 Aタグの中にtableとか入ってると効かなかったり。

　tableを<div style="display:table">とか<div style="display:table-cell">に置き換えよう。

　

Q8 iPhoneで電話番号入れたら一番前の0が消えた！

A8 <input type="number" />とかすると中身が数字扱いされて前0が消える仕様です(iOS 5以上？)。

　<input type="tel">で。

　

Q9 iPhoneで数字入れたら勝手にカンマ区切りになった！

A9 <input type="number" />とかすると中身が数字扱いされてカンマが入る仕様です(iOS 5以上？)。

　サーバー側でカンマ削除してしまうってのが一つ。

　もう一つは<input type="text" pattern="[0-9]*" />みたいな感じで。

　

追記：

※Basic認証下でfavicon出ないとかは、

ブラウザがfavicon取得の際に認証ヘッダを付けてくれなかったりするせい。

あと微妙にuser-agentが違ったり。

とにかくスマホのブラウザは奇妙な動きするのでapacheのログでヘッダ確認しましょう。

ツイートする

Permalink | コメント(0) | トラックバック(0) | 00:30