[CSS]「Responsive Grid System」で悲しい誤解を受けないために

会社ブログで書いた記事にこんな反応があったので補足。

先週会社で書いた記事→「今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ」

“MediaQuery非対応ブラウザで閲覧すると「スマートフォン画面」が表示されることになります” それが閲覧上問題になることあるんだろうか / “今までの常識を覆す!?レスポンシブかつ超軽量なCSSフレームワーク | スマートフ…” https://t.co/N1h7tN5IOD

— Jeffrey Francesco (@JForg) October 21, 2013

と、いうわけで「非対応ブラウザでこのフレームワークを使ったサイトを見るとどうなるか」、UA偽装で再現してみました。

スマホデザインをPCで見るのはキツかった

通常ブラウザで見るとこんなデザインのサイト。

そしてIE6-8あたりの非対応ブラウザで見た場合

モバイルファーストに基づいて「スマホデザイン」が読み込まれている関係上、こんなデザインのサイトをPCで見ることになります。

スマホ画面に合わせたCSS記述がされていることもあり、 img の width が 100％ になってたりするとかなり酷いことに。

全てはレトロブラウザがmediaqueryで設定されたタブレット・PCデザインを読み込めばすむ話なのに・・・

レトロブラウザな方々から誤解を受けないためにも

このまま放置すると、「なんだこのサイトを作った奴は」と誤解されるおじさま方がいらっしゃると思うので、「非対応」を宣言することをおすすめします。
[code]
$(document).ready(function(){

var ua = window.navigator.userAgent.toLowerCase();
var ver = window.navigator.appVersion.toLowerCase();
var name = ‘unknown’;
if (ua.indexOf("msie") != -1){
if (ver.indexOf("msie 6.") != -1 || ver.indexOf("msie 7.") != -1 || ver.indexOf("msie 8.") != -1){
jQuery(‘.if-ie’).css(‘display’,’block’);
jQuery(‘.header’).css(‘margin-top’,’60px’);
}
}
});
[/code]
参考：HTML – IEユーザーを撲滅させるためのjavascript。さぁ今すぐWEBサイトに組み込もう！ – Qiita [キータ]

別サイトで書いたjsなのですが、ie8以下の場合のみページトップにメッセージボックスを表示させるようにしています。

「非対応なんて聞いてない！」と言われないためにも、こういった自衛策をとっておいた方が良さそうです。