モバイル デバイス上のビューポートは、モバイル デバイス上で表示される Web ページの領域を指します。モバイル デバイスの画面サイズと解像度は異なるため、さまざまなデバイスで Web ページを正しく表示および操作できるようにするには、ビューポート設定を通じてさまざまな画面サイズに適応する必要があります。
モバイル デバイスでは、通常、Web ページはデスクトップ コンピュータよりも幅が広いため、小さな画面に合わせてサイズを変更して調整する必要があります。ビューポート設定は、<meta>タグのviewport属性を通じて実装されます。特定の設定は次の側面を制御できます。
-
width:ビューポートの幅を設定します。通常、Web ページが画面全体に表示されるように、デバイスの幅に設定できます。 -
initial-scale:ページの初期サイズを制御するために使用される初期ズーム レベルを設定します。 -
minimum-scaleおよびmaximum-scale:ズームの最小範囲と最大範囲を設定して、ユーザーのズーム操作を制限します。 -
user-scalable:ユーザーがページを手動でズームできるかどうかを制御します。
ビューポート設定の例を次に示します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
この例では、width=device-widthビューポートの幅がデバイスの幅と等しく、initial-scale=1.0初期ズーム レベルが 1.0、つまりズームなしであることを意味します。これにより、モバイル デバイスではページがデバイスの画面幅と同じ幅の元のサイズで表示されます。
ビューポートを適切に設定すると、コンテンツが切り取られたりサイズが大きすぎたりすることなく、さまざまなモバイル デバイスで Web ページを適切に表示できます。同時に、ビューポート設定はユーザーの対話エクスペリエンスにも影響を与えるため、ユーザーは Web ページをより便利に閲覧して使用できます。
Q: WebページをPC側のみで表示する場合、メタのビューポートプロパティの設定は必要ですか? はい、Web ページが PC 側でのみ表示される場合は、通常、タグの属性
を設定する必要はありません。属性は主に、Web ページがさまざまな画面サイズで正しく表示され、操作できるようにするために、モバイル デバイスのレスポンシブ デザインで使用されます。<meta>viewportviewport
PC 側では、ブラウザは通常、デスクトップ画面のサイズに合わせてデフォルトのビューポート設定を使用します。したがって、PC 側でのみ表示される Web ページの場合は、viewport通常、属性を設定しないことが適切です。
viewportWeb ページが PC とモバイル デバイスの両方で表示される場合は、モバイル デバイスでの表示効果も良好になるように、状況に応じて適切なプロパティを設定することを検討できます。ただし、PC側でのみ表示する場合はviewport属性を設定する必要はありません。