Meta viewport設定上の留意点

①「width=device-width」を記述して、画面の幅をデバイス非依存ピクセルに合わせる

width=device-widthを使用すると、モバイル用とPC用のどちらでレンダリングしでも、それぞれの画而サイズに合わせて、ページ内のコンテンツをリフローすることができます。

しかし、「width=device-width」の部分をrwidth=320」のように何か特定の数値(固定幅)で指定した場合、~のように(PageSpeedInsights)で指摘を受けます。固定サイズとして確実に表示するためにはよいのですが、Googleは推奨していません。端末のサイズに関わりなく、どんなものであっても対応できるWebサイト』にするようGoogleは促しているのです。これは、さらなるマルチデバイスの時代を予見しているともいえます。

②initial-scale=lを記述して、CSSピクセルとデバイス非依存ピクセルの聞に1:1の関係を確立する

ページが最初に読み込まれるときの表示倍率で、拡大率をふやす設定です。「width=device-width」という設定は、デバイスの本来の向きの幅に合わせることです。しかし、スマートフォンは縦だけでなく横向きにして見ることもあると思います「linitial-scale=1 」を加えることで、画面が横向きになったとしても、横向きでの全体を利用できるようになります。

③確実にアクセスできるようにする

ビューポートには、initial-scaleのほかに、「minimum-scale」 「 maxi mum-scale」「 user-scalable」などを設定することもできます。しかし、これらの属性の設定は、あまりおすすめできません。なぜなら、モパイル使用者がズームできなくなる場合があるため、アクセシピリティに支障をきたすことが考えられるからです。