スマホに対応。

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

当然のように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でブロック化をすでにしてあるサイトなら
けっこう簡単にできる。

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

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

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

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


コメントを残す

メールアドレスが公開されることはありません。* が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)