ビューポートとIE8以下ユーザーのための設定

1 ビューポートの設定
2 旧IEバージョン対応させるレスポンシブウェブデザイン

Googleからのメールに記載されてあった、ビューポートが設定されていませんの問題を解決。

no_imagae
viewport

ビューポートの設定

ビューポートの書き方を検索し調べまくった結果、現在正しい書き方というのがイマイチわからない。
というのも大手サイトの書き方が、間違ってるという指摘しているサイトが多ことからもあげられることから今後変更する可能性もある。

とりあえず現状うちの場合は、レスポンシブウェブデザインでPC用は、固定幅でモバイル・タブレット用は可変なので、このような記述にしてある。
このビューポートの設定をhead内に挿入している。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-widthは、各モバイル・タブレットのデスプレイに合わせて表示する。
レスポンシブウェブデザインなら可変で制作してるはずなので、widthの値を指定しなくても良いのだが、全てのデバイスにおいて固定幅で表示させるなら

<meta name="viewport" content="width=数値記入">

上記の固定幅を実際に書いてる大手サイトが見当たらなかった。あまり固定幅は、オススメできないかかもしれない。

initial-scale=1.0は、モバイル・タブレットで表示させた場合の初期倍率。
minimum-scale　と　 maximum-scale　といった、最小最大倍率も指定できるが、指定しまうとモバイル・タブレットの閲覧者が倍率を自由に変更不可というデメリットが生じるので指定しない方が良いとの判断。
レスポンシブウェブデザインは、どのデバイスにも対応でき閲覧者が自由に設定できることをコンセプトして制作していること忘れないようにしたい。

旧IEバージョン対応させるレスポンシブウェブデザイン

IE8以下のバージョンを利用しているユーザーは、CSS３とHTML５が効かないので、head内下記コードを挿入しておく。
コードの意味は、IE８以下のバージョンで閲覧した場合のみ下記のコードを読み込みますということ。

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->