2015/03/09

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

前回のレスポンシブウェブデザインにリニューアル~その1の続き。

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


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以下のバージョンを利用しているユーザーは、CSS3とHTML5が効かないので、head内下記コードを挿入しておく。
コードの意味は、IE8以下のバージョンで閲覧した場合のみ下記のコードを読み込みますということ。

<!--[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]-->

 

 

コメントはこちらから

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

この記事へのトラックバック

scroll to tpp