1つのhtmlでいろんなデバイスに:2013/06/8

毎日、やりたいことは沢山あるのに遅々として進まない、 カピバラ兼業主婦かぴのんです。

ゲームばっかりしてると思ったら大間違いです。一番大変なのは、チビたちを心身共に健康に育てることです。
全く上手に出来てませんけど！！旦那さん頼み。

さて、今回はクロスブラウザ＆デバイスのお話・・・。 ブラウザだけでもie,firefox,safari,chrome,opera・・・もうこれ以上増やさないでください・・・。
デバイスもiphone,andoroid,ipad・・・もうそろそろいいんじゃないですか・・・。
もうすぐ、スマホでfirefoxのOSもでるらしいですし。

こんなにいっぱいあったら、デバッグどうすんのよ！って感じですね。

そこで今回、このかぴのんサイトでは、htmlのhead内でcssを変えるだけで、480px以上のときはこっち、以下のときはコッチと読み込ませています。

でも、方法はいろいろあるので、考えれられる事をまとめてみました。

• 1.htmlのheadの中でcssはこっちと振り分け(PHP、JavaScript、CSS)
• 2.ユーザーエージェントを指定して判別させる
• 3.cssの中で@media～で振り分け
• 4.CSSフレームワークを使うlessframework

たぶん、まだありますが・・・。
今回は、最初にスマホ向けにcssを作ってしまったので、@mediaを差し込むよりも、 別cssをつくり振り分けました。

いや～～わからないことがどんどん出てきますね！ またサイト作成のときにわからない事あればメモしていきたいと思います。

ちなみにユーザーエージェントを指定して振り分けている際は、 クロームブラウザは、F12＞右下歯車クリック＞ 左側にでてくる、Settings＞ovrrides＞User Agent を選択した後、F5で更新すると、そのサイトがUser Agentを指定している場合、 そのデバイスのUser Agentで閲覧できますよ！

それでは、皆様おつカピ様でした〜〜。