Respond.js で Internet Explor 8 対応

サイトの制作してて、レスポンシブデザインのフレームワークを今回採用したんだけど、Internet Explor 8 で確認するとレイアウトが崩れてしまう。

「嗚呼、まだ呪いが解けないのか!」と思いつつも、んなこと言ってらんないのでグーグル先生に聞いてみたところ、respond.js なるものを発見、早速導入して、なんとか事なきを得た次第。

カンタンに言うと、レスポンシブデザインとはディスプレイのサイズに合わせてデザインを最適化するフレームワークを導入することで、1つのソースコードですべてのデバイスへ対応できることを狙いとしています。

これまでは、PC 用に1つのソースコード、タブレット用に1つのソースコード、スマフォ用に1つのソースコードを準備して、さらにそれぞれを Chorme だ、Safari だ、Firefox だ、Internet Explor だって切り替えていたわけなんですね(面倒臭っ!)。

これがレスポンシブデザインを採用すると、1つのソースコードで管理できるので修正・変更があった際は1個だけ修正すれば良いし、ヒューマンエラーも減るしでイイことづくしなんです。

さらに、マーケティング的にも PC から、タブレット、スマフォでサイトを閲覧する時間が増える傾向にシフトしつつあるので、レスポンシブデザインではスマフォでの見栄えを最初に意識して設計を始めます(これはモバイルファーストと呼ばれています)。

んで、他のブラウザに比べて困っちまうのが Internet Explor で、独自の解釈をして WEB サイトを表示させるので、段組が崩れる、文字サイズが微妙に変わる、余白が変、ひどいと表示されない、など WEB 屋さん泣かせな非常にやっかいなブラウザなんです。
とは言え、Internet Explor を使ってる人はまだまだ多いので丸っきり無視するわけにもゆかず、今回も非常に焦ってました。

そんな状況で見つけたのが Respond.js です。

導入もカンタンで、下記の通りの手順で Internet Explor 対策が完了しました。

(1)上記のサイトから、スクリプトをダウンロード
(2)所定のサーバにアップロード
(3)ヘッダ内に下記の1行を追加

 <script src="respond.min.js"></script>

作って配布してくれたエンジニアに感謝しつつ、シェアします。

 

この投稿へのコメント

コメントはありません。

コメントを残す

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

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL