[Webデザイン関連]レスポンシブ対応したらIE8に非対応の刑…ヒ~助けて~Respond.js様!

公開日: : ツール

concrete5とは直接関係ないものの、自社サイトを構築している中で困ったこと。それはやっぱりクロスブラウザ対応かな…と。
Webサイトのデザイン面で大きな役割を担うCSS3などの規格に対応したCSSフレームワークをすると(今回はFoundation5)、スマホやタブレットPCをターゲットにしてWebサイトをデザインしていく「モバイルファースト」という考え方で作られているため旧来のブラウザがその表示形式に対応していないケースがある。

特に、MicrosoftのInternetExploreシリーズはバージョンによって全然違う動きをすることがあって、下位バージョンとの表示差を「互換表示モード」という機能をわざわざ組み入れているくらい。差がある。そして、Web製作側でも対応を考えさせられる部分でもある。

で、今回ももれなくそのようなことを考慮しなければならないのを綺麗に忘れていてFoundation5を使ってスマホ・タブレットPCに対応させるんや!というアホな思想で進めてしまったから、後でとんでもないことになってしまった。

発端は、社内にサーバーを立ててconcrete5を使って構築したサイトを社内向けに公開したところ、IE8のユーザーから「表示おかしいで!」という連絡をもらって気づいたというお粗末な話。

普段、Firefoxを使っている私はIE9では動作などを確認していたものの、下位バージョンを見逃していた。

あわてて、公開されている既存の自社サイトのGoogleアナリティクスからWebアクセス元ブラウザでアクセス数を集計してみるとIE8のアクセスが全体の65%を超えていた。
もっと早くこのアクセス解析結果を見てサイトを作っていたら先回りしてサイト構築時に気付けていたのだが、そんなことも忘れてconcrete5とFoundation5の魅力に憑りつかれていた…涙

で、泣きつくようにGoogle先生にレスポンシブ IE8 対応と検索してみました。

すると、どうやらJavaScriptのライブラリがあるらしい…というところにたどり着きました。これは、CSS3のメディアクエリ非対応のブラウザ(ここではIE8以下)にもレスポンシブっぽい表示をサポートしてくれるという優れものだそうな。
その名も「Respond.js」というライブラリらしい。これは使わねば!ということで早速実装。

GitHubのhttps://github.com/scottjehl/Respond‎からソースファイルを入手して、テーマディレクトリ直下に配置してスクリプトの呼び出し元のHTMLソース内の<head>~</head>エリアに呼び出しのステップを記述すれば対応完了!

めちゃくちゃ導入が簡単な上、結構な数の関連ブログ記事があって導入ノウハウなどに困ることはなかったです。

おかげで、大幅な修正をしなくても済みました!

ありがとう!Respond.js様~

Comment

  1. […] 諦めるわけにもいかずいろいろ探していると、ありました!!というのが前回の記事「[Webデザイン関連]レスポンシブ対応したらIE8に非対応の刑…ヒ~助けて~Respond.js様!」だった。 […]

[Webデザイン]続…レスポンシブをIE8できれいに表示するFoundation5 | システムエンジニアのネタ帳 にコメントする コメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

no image
S4 HANA 外貨評価 評価基準日

障害発生時に気づかなかったのと、SAPヘルプポータルで記載がなかったの

no image
SAP S/4 HANAの全体像を抑える

S/4 HANAに移行するプロジェクトが増えてきている中で、いったいS

no image
[SAP PS]プロジェクトとWBS要素のステータス一括更新

以前だと、プロジェクトやWBS要素のステータスを更新する場合にはプロジ

no image
[SAP PS]計画・実績計算と仕訳計上

プロジェクト・WBS要素を用いた計画と実績管理を行うプロジェクトで、

no image
[SAP PS]プロジェクトに紐付けできるWBS要素数

定義したプロジェクトに紐付けられるWBS要素の最大数は10,000だそ

→もっと見る

    PAGE TOP ↑