携帯卒業＆スマホ入学を遅ればせながらしたので。
自動でスマホに対応できないサイトを
調整しようと思い立ち。
当然のようにCSSになるんだけど。
今まで、見てみぬフリをしてきたので、どこをいじればいいのかと、
毎度のごとく、ググってみる。
すると。
iPadやiPhoneなど、デバイスごとに最適化したCSSを読み込む Media Queriesという記事がHit。
headエリアへ追加
width: 〜480pxの端末のときには iphone.csswidth: 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で記事を書いてください。」
というのを徹底しないと、実はオオトボケというコトになりかねず。
そのあたりの対応をどうすべきか、悩みどころになるらしい。
