htmlページにおけるmeta viewport属性の説明

HTML meta viewport 属性の説明

ビューポートとは

モバイルブラウザは、各ページを小さなウィンドウに押し込む必要がないように、通常画面よりも広い仮想の "ビューポート" にページを配置します。これにより、ユーザーは各ページを小さなウィンドウに押し込むのではなく（モバイルブラウザに最適化されていないページのレイアウトを壊すことになる）、パンやズームでページの別の部分を見ることができるのです。モバイル版Safariは最近、viewportメタタグを導入し、ウェブ開発者がviewportのサイズとズームを制御できるようになり、他のモバイルブラウザでもほぼサポートされるようになりました。

ビューポートの基本

モバイルウェブ用に最適化されたページの一般的なviewport metaタグは、おおよそ次のようなものです。

width: ビューポートのサイズを制御し、600の場合は指定された値、デバイスの幅の場合はdevice-widthなどの特別な値（100％に拡大した場合のCSSのピクセル単位）を指定します。
height：widthに対応し、高さを指定する。
initial-scale: 初期スケール，つまりページを最初に読み込んだときのスケール。
maximum-scale: ユーザーが拡大縮小できる最大スケール。
minimum-scale: ユーザーが拡大縮小できる最小のスケール。
user-scalable: ユーザーが手動でスケーリングできるかどうか

ビューポートに関するいくつかの質問 [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]