ウェブサイト制作でよく使う viewport の設定いろいろ

About HTML

レスポンシブサイトなどモバイル対応のサイトを制作するときに忘れずに設定しなければいけない viewport です。

viewport は HTML へ meta タグとして記述します。

今回は、よく使うviewport をいくつかメモしておきます。

ピンチイン&ピンチアウトが使用できる viewport

この viewport  を記述すると、ウェブサイトがモバイルで閲覧されたときにピンチインとピンチアウトができます。

ピンチイン&ピンチアウトを不可にする viewport

この viewport を記述すると、ウェブサイトがモバイルで閲覧されたときにピンチインとピンチアウトができなくなります。

モバイル対応ではない場合はこの viewport

ウェブサイトがモバイル対応ではない場合、俗にいう PC サイトの場合は、応急処置としてモバイルで閲覧したときに PC サイトが型くずれをおこなさにようこの viewport を記述します。ピンチイン&アウト対応です。

任意のサイズ例:ウェブサイトの幅が 1000px であれば 1060px のように少し元のウェブサイトよりも大きめで入力する。

注意点

これらの viewport を使った場合、Android ブラウザで閲覧した時にフォントサイズが大きくなってしまうバグが起こることがあります。

その場合には、以下のお守り CSS をリセット CSS に記述します。

リセットへの使用例:

リセットに記述した場合は他で max-height を使用するときに注意しなければならない。