スマートフォンやタブレットでも見られるように、デザインを変更してみました。 : ういすぷの記録帳

最近話題の「レスポンシブ Web デザイン(Responsive Web Design」と言う感じで、スマートフォンやタブレット、PCでも同一HTMLをCSSを切り替えることで表示出来るようにしてみました。
厳密なレスポンシブデザインとまではいきませんが、ちゃんとリンクはクリック出来るようにしました。
ただし、テスト端末が少ないため、うまいこと表示出来るかは疑問だったりします。
また、METAタグで携帯電話(フューチャーフォン)を自動的に携帯電話用のページへ誘導していましたが、それを停止しました。

ちょいちょい直すこともあるかと思いますが、ご了承くださいませ。

CSSの切替の鍵は、「@media only screen and〜」の部分でしょうか
※ このままでは、ちょっと不具合がありましたので、少しソースを変えました。下記参照。
/* for smart phone */
@media only screen and (max-width: 480px) {
〜ここにスタイル
}
/* for tablet */
@media only screen and (min-width: 481px) {
〜ここにスタイル
}
/* for pc */
@media only screen and (min-width: 769px) {
〜ここにスタイル
}
早い話が、サイズによってスタイルを切り分けるってだけですね。
本当は、％指定でやらなくてはなりませんが、色々都合がわるかったので、なんちゃってのレスポンシブデザインです。

画像に関しては、縦横幅を％指定にさせる感じです。
img {
max-width:100%;
height:auto;
width:auto;
}
こんな感じ。

そして、ここがキモというかミソというか。
IE9以下については、捨てました。
XPもサポート対象外となることからIE10のみでいいかなと思っています。
IE9以下に合わせると、CSS等のソースが増えるばかりか、メンテナンスなども多く色々面倒になるので、対応を諦めました。

ご了承ください。

作ってみて思ったところは、画像やHTMLパース処理の性能などをみると、スマホ専用ページにした方が、処理速度が上がりそうな感じです。

※ 表示される画像をHTMLのwidth,heightをでサイズ調整している場合に、思った表示がされなかったため、画面サイズによるCSS切替の処理を変えてみました。
/* for smartphone */
@media only screen and (max-width: 480px) {
〜〜〜〜
}
/* for tablet */
@media only screen and (max-width: 768px) {
img {
max-width:100%;
height:auto;
width:auto;
}
}
/* for pc */
@media only screen and (min-width: 769px) {
〜〜〜〜
}
これにより、画面サイズ768ピクセル以下の場合にのみ、max-width:;の値が効くようにしています。