スマホ向けのWEBサイト制作をしていると、androidでの不具合に直面するときがあります。
iPhoneでもandroidでも両方の端末でキレイになるようにコーディングする、というのは基本なのですが、どうしてもandroidだけ別のcssを読ませたい、という時に、
androidであることを判別して、classをつけてしまう
というのが便利です。
という風に。
jqueryのメソッドを使ってるのでjqueryが入ってることが前提ですが、javascriptだけでも簡単にできると思います。
navigator.userAgentで、ユーザーエージェントを取ります。
要素.indexOf('hogehoge')というのは、要素の中にhogehogeという文字列が何番目に出てくるかの数字を返すものです。
検索して返す、みたいな。
文字列が見つからなければ、-1が返ってきます。
なので、見つかった場合は0以上の数字が返ってくる。
ってことですね。
あとは、androidの不具合に合わせて、css側で
とか書いていくわけっすね。
iPhoneでもandroidでも両方の端末でキレイになるようにコーディングする、というのは基本なのですが、どうしてもandroidだけ別のcssを読ませたい、という時に、
androidであることを判別して、classをつけてしまう
というのが便利です。
<html class="android">
という風に。
if(navigator.userAgent.indexOf('Android') > 0){$("html").addClass("android");}
jqueryのメソッドを使ってるのでjqueryが入ってることが前提ですが、javascriptだけでも簡単にできると思います。
navigator.userAgentで、ユーザーエージェントを取ります。
要素.indexOf('hogehoge')というのは、要素の中にhogehogeという文字列が何番目に出てくるかの数字を返すものです。
検索して返す、みたいな。
文字列が見つからなければ、-1が返ってきます。
なので、見つかった場合は0以上の数字が返ってくる。
ユーザーエージェント情報の中からAndroidの文字列が見つかったら、htmlタグにclass="android"を追加しろ
ってことですね。
あとは、androidの不具合に合わせて、css側で
.android p{
ホニャララ
}
とか書いていくわけっすね。