レスポンシブサイトを作る機会がここ最近かなり増えて来ました。
かくいうこのブログもレスポンシブ対応しています。
レスポンシブサイトを作る時には
デザイン面等でも気を付ける事は幾つかありますが、
今回はhtmlソースのみでの私が考える最も重要で
私が最低限やっていることをご紹介します。
Contents
X-UA-Compatibleの指定
X-UA-Compatibleの指定でIEのレンダリングモードを制御します。
私はこれが一番重要だと思います。
記述例
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
下記の様に他にも指定方法は色々ありますが、
私は上記の指定をよく使っています。
IE8のレンダリングモードで表示させる記述例
<meta http-equiv=”X-UA-Compatible” content=”IE=8″>
viewportの指定
記述例
<meta name=”viewport” content=”width=device-width,initial-scale=1″>
viewportの指定は様々な記述方法がありますが、
レスポンシブサイトの場合はリキッドレイアウトである事が多いと思いますので
私はこの記述で殆どの場合は問題ないかと思います。
サイトによってuser-scalable=noを追加する位でしょうか。
IEにhtml5とcss3を対応させる
記述例
<!–[if lt IE 9]>
<script src=”js/html5shiv.js”></script>
<script src=”js/css3-mediaqueries.js”></script>
<![endif]–>
html5shiv ダウンロードページ
css3-mediaqueries-js ダウンロードページ
あとはコーディングを進めて行けばO.K.です。
以上、ご参考までにどうぞ。