メモの日々

■ [web] HTMLにviewportを指定する

本サイトの日記以外の部分は、スマートフォンで表示すると文字が小さく見難かった。これを改善するためにHTMLのヘッダへ

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

というタグを追加した（日記についてはtDiaryがこのタグを出力しているので対処不要）。とはいえ、すべてのHTMLに追記するのは大変なので主なものだけ。

viewportはCSSでも指定でき、ならばその方が便利なのだけれど、試した範囲では指定が適用されているように見えなかった。

さて、上のmetaタグは何を意味しているのか。MDNのmeta要素のページに少し説明がある。

viewport は、ビューポートの初期サイズに関する助言を与えます。モバイル端末のみで使用されます。

この属性は標準化されていませんが、事実上優勢であるためほとんどのモバイルブラウザーで使用されています。

ということで、モバイル端末用の設定のようで、モバイル端末からアクセスされるウェブページにはもれなく記述すべきものに思える。

viewportのwidthには「ビューポートの幅をピクセル数で」を指定する。ビューポートとは何なのかがはっきりしないが、ブラウザがウェブページをレンダリングする際の仮想的な領域と考えればいいのかな。device-widthを指定するとブラウザの表示領域の幅のピクセル数と等しい値になる模様。

viewportのinitial-scaleには「デバイスの幅 (ポートレートモードでの device-width またはランドスケープモードでの device-height) とビューポートの寸法との比率」を指定する。widthを指定すれば計算できる値なのでwidthと同時に指定するのはおかしい気がするけど、同時に指定する例ばかり見る。

metaタグの指定なしのデフォルトで width=device-width であるべきだと思うのだけれど、それだと都合の悪いページが多いのだろうか。