スマホに対応。

携帯卒業＆スマホ入学を遅ればせながらしたので。
自動でスマホに対応できないサイトを
調整しようと思い立ち。

当然のようにCSSになるんだけど。
今まで、見てみぬフリをしてきたので、どこをいじればいいのかと、
毎度のごとく、ググってみる。

すると。

iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queriesという記事がHit。

headエリアへ追加
width: 〜480pxの端末のときには iphone.css

width: 481〜1024の端末が縦（portrait）のときには ipad-portrait.css

width: 481〜1024の端末が横（landscape）のときには ipad-landscape.css

width: 1025〜の端末のときにはpc.css

CSSファイルの中に直接、@ルール(?)で記述する場合　↓
@media all and (orientation:landscape) {
/* デバイスが横向きのときのためのCSSを書いてみたりできる */
}

CSSでブロック化をすでにしてあるサイトなら
けっこう簡単にできる。

というワケで１サイト実行してみたら…。

実は、そのサイトはブログサイトで（なのにｗスマホに自動対応していないとゆぅｗ
記事の中で、表示の際の横幅を直接書いてたりするものは
(classではなくstyleで）
当然スマホ用CSSには書いてないので
スマホで見ると当然くずれてしまう。。。

「こういう時はこのclassで記事を書いてください。」

というのを徹底しないと、実はオオトボケというコトになりかねず。
そのあたりの対応をどうすべきか、悩みどころになるらしい。