1. ホーム
  2. Web制作
  3. HTML/Xhtml

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

2022-01-10 16:20:05

HTML meta viewport 属性の説明

ビューポートとは

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

ビューポートの基本

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

コピーコード
コードは以下の通りです。

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

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

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