ビューポート

ビューポートとは、ユーザーの画面上でウェブページやアプリケーションが表示される可視領域のことです。デスクトップコンピューターでは、ビューポートはツールバー、スクロールバー、ブラウザクロームを除いたブラウザウィンドウに相当します。タブレットやスマートフォンでは、ビューポートはブラウザが使用できる画面全体の領域です。ビューポートは、コンテンツがどのようにスケーリング、レイアウト、読者への表示されるかを決定します。HTMLでは、`<meta name="viewport">`タグがブラウザにページの寸法とスケーリングの制御方法を伝え、これが[レスポンシブデザイン](/glossary/responsive-design)の基盤となります。

ビューポートの違いを無視したコンテンツは、特定のデバイスで読みにくい体験を提供します。テキストがスマートフォンで読めないほど小さくなったり、ボタンがタップできなくなったり、ページ全体を見るために横スクロールが必要になったりします。モバイルデバイスがウェブトラフィックの大部分を占める現在、異なるビューポートサイズに適応しない出版物は読者を失い、プロフェッショナルさに欠ける印象を与えます。検索エンジンもランキングにモバイルフレンドリーを考慮するため、適切なビューポート処理はユーザー体験と検索での発見性の両方に影響します。

FlipLinkの出版物は完全にレスポンシブで、あらゆるビューポートサイズに自動的に適応します。フリップブックビューアは利用可能なビューポートの寸法を検出し、ページレンダリング、コントロールの配置、ズームレベルを適切に調整します。広いデスクトップビューポートでは、出版物は[見開きページ](/glossary/page-spread)で表示されます。狭いモバイルビューポートでは、タッチフレンドリーなナビゲーション付きのシングルページビューに切り替わります。[ページエクスペリエンス](/features/page-experience-and-layout)設定により、パブリッシャーは異なるレイアウトモードを選択でき、FlipLinkがビューポートの計算を処理してコンテンツを常に読みやすく、バランスの取れた比率に保ちます。[レスポンシブ埋め込み](/features/sharing-and-distribution)コードを使用してフリップブックを埋め込むと、コンテナを自動的に満たし、デバイスの回転を含むビューポートの変化に追加設定なしで対応します。

ビューポートはHTML metaタグ`<meta name="viewport" content="width=device-width, initial-scale=1">`で制御されます。このタグは、ページ幅をデバイスの画面幅と同じに設定し、1倍ズームで開始するようブラウザに指示します。このタグがない場合、モバイルブラウザはページを約980ピクセルの仮想幅でレンダリングし、結果を縮小して画面に合わせるため、テキストが極小になりインタラクションが困難になります。 主要なビューポートプロパティ： - **width**：ビューポート幅を設定します。`device-width`は画面のCSSピクセルでの実際の幅に一致します。 - **initial-scale**：ページが最初に読み込まれるときのズームレベルを制御します。値`1`はズームなしを意味します。 - **maximum-scale**と**user-scalable**：ユーザーがピンチトゥズームできるかどうかを制御します。アクセシビリティガイドラインではズームを許可することを推奨しています。 - **viewport-fit**：ノッチや丸い角を持つデバイスでは、`viewport-fit=cover`がコンテンツをセーフエリアまで拡張します。 CSSメディアクエリはビューポートの寸法を使用して異なるスタイルを適用します。例えば、`@media (max-width: 768px)`は768 CSSピクセルより狭いビューポートを対象とし、タブレットからモバイルへの移行の一般的なブレークポイントです。

**「ビューポートと画面解像度は同じもの」** 違います。スマートフォンの画面解像度が1170 x 2532物理ピクセルでも、ビューポートは390 x 844 CSSピクセルです。デバイスピクセル比（DPR）がこのギャップを埋めます。そのスマートフォンではDPRは3で、各CSSピクセルが9つの物理ピクセルに対応します。デザイナーはCSSピクセル（ビューポート）で作業し、物理解像度ではありません。 **「`user-scalable=no`を設定すると体験が向上する」** ズームを禁止することは、視覚障害のあるユーザーのアクセシビリティを損ないます。現代のウェブ標準と多くのアクセシビリティ監査では、これを問題として指摘します。FlipLinkのビューアは、レイアウトの整合性を維持しながら、デフォルトでピンチトゥズームを許可しています。 **「デスクトップのビューポートサイズは一定である」** デスクトップのビューポートは大きく異なります。27インチモニターとブラウザの開発者ツールを開いているユーザーのビューポートは、わずか900ピクセルまで狭くなる可能性があり、これはタブレットの範囲内です。レスポンシブな出版物は、想定されるデバイスカテゴリではなく、実際のビューポート寸法に適応する必要があります。

ビューポートは、読者がコンテンツを見るための窓です。ビューポートサイズに応答する出版物は、4インチのスマートフォンから32インチのデスクトップモニターまで、あらゆるデバイスで一貫したプロフェッショナルな体験を提供します。読者が適応が起きていることに気づくことはありません。