モバイルブラウザのビューポートパラメータ (Web フロントエンドデザイン)

モバイルブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィンドウは通常、画面よりも幅が広くなっています。このため、各 Web ページを小さなウィンドウに押し込む必要がなくなります (モバイルブラウザ用に最適化されていない Web ページのレイアウトが崩れる恐れがあります)。ユーザーは、パンやズームによって Web ページのさまざまな部分を表示できます。 Safari のモバイルバージョンでは最近、ビューポートメタタグが導入され、Web 開発者はビューポートのサイズとスケーリングを制御できるようになりました。他のモバイルブラウザーも基本的にこれをサポートしています。
ビューポートの基本

モバイル向けに最適化されたページでよく使用されるビューポートメタタグは次のようになります。

<meta name=”viewport” content=”width=デバイス幅、初期スケール=1、最大スケール=1″>

width: ビューポートのサイズを制御します。600 などの値、またはデバイスの幅 (100% に拡大した場合の CSS ピクセル単位) である device-width などの特殊な値を指定できます。
height: 幅に対応して高さを指定します。
initial-scale: 初期ズーム比、つまりページが初めて読み込まれたときのズーム比。
最大スケール: ユーザーがズームできる最大スケール。
minimum-scale: ユーザーがズームできる最小スケール。
ユーザースケーラブル: ユーザーが手動で画像を拡大縮小できるかどうか。はいまたはいいえ

<<: HTML ヘッドタグの詳細な紹介

>>: CSS 画面サイズ適応実装例