ビューポートとは何ですか？

Scrapeless Agent Browser は、ページレイアウトや取得される出力に影響を与えるビューポートおよび表示設定を備えた、管理されたブラウザ環境を提供します。

ビューポートは、ブラウザがドキュメントを表示する領域です。Web 開発において、この用語はページのレイアウトに使用されるスペース、または現在表示されているそのレイアウトの一部を指すことがあります。これらの領域はデスクトップブラウザでは互いによく似ていますが、モバイルでのズームやその他の表示変更時には異なる場合があります。

ビューポートは、物理的な画面、ブラウザウィンドウ全体、ドキュメントの全体の寸法、そして考えられるあらゆるスクリーンショットの寸法とは異なります。これらの計測値を区別することで、レスポンシブなページがナビゲーションを変える理由、ズームによってレイアウトの一部が隠れてしまう理由、そしてフルページキャプチャが表示中のブラウザ領域よりもはるかに縦長になりうる理由が説明できます。

レイアウトビューポートはページの作業領域を定義する

レイアウトビューポートは、ページコンテンツをレイアウトするための基準となる空間を提供します。レスポンシブルールとドキュメントのジオメトリはその環境に依存しているため、ビューポートの寸法を変更すると、インターフェイス自体が変化する可能性があります。

The CSSOM View ジオメトリーモデル webアプリケーションで使用される、ブラウザーおよびドキュメントの計測の概念を定義します。これらの計測値は、そのいくつかに width や height という単語が含まれているというだけの理由で、互換的に扱うことはできません。

十分な横幅がある場合に、ナビゲーションリンクの行を表示するサイトを考えてみましょう。レイアウトが狭くなると、それらのリンクをメニューボタンに置き換えることがあります。ワイドなレイアウト向けに書かれたオートメーション用ロケーターは、アプリケーション自体は正しく動作しているにもかかわらず、狭いレイアウトでは失敗する可能性があります。

コンテンツはビューポートを超えて広がることがあります。長い記事は、ブラウザに現在表示されている範囲よりも大きな縦方向のドキュメント領域を占めます。スクロールは表示される領域を変えるだけであり、ドキュメント全体の高さをビューポートの高さに変えるわけではありません。水平方向のはみ出しも同様の注意が必要です。隠れたコンテンツは、意図的なスクロールを示している場合もあれば、レイアウトの問題を示している場合もあるからです。

ビジュアルビューポートは表示されている領域を表す

ビジュアルビューポートは、レイアウトのうち現在ユーザーに表示されている部分を表します。特に、モバイルでのピンチズームによって、画面に収まるページの範囲が変化する場合に、この区別は重要になります。

The レイアウトとビジュアルビューポートの概念 ページを拡大表示することは、ページ全体がより狭いデバイス向けにレイアウトし直されたことを意味するわけではない理由を説明してください。ユーザーは、既存のレイアウトの一部をより小さい範囲で表示しているにすぎません。

オンスクリーンキーボードやブラウザーインターフェイスの変更も表示領域に影響を与え、その動作は環境や設定によって異なります。固定されたコントロールはドキュメント内に存在していても、現在のインタラクション状態では見えなくなっている場合があります。特にユーザーが小さな画面でフォームに入力しなければならないときには、重要となる状態をテストしてください。

診断のために、どの種類の測定値を使用しているかを記録してください。「高さが変わった」とだけ報告すると、レイアウト、表示領域、画面ジオメトリ、あるいはドキュメントコンテンツのどれが変化したのかが不明確なままです。測定対象を明示することで、視覚的な問題を再現可能にします。

CSS ピクセルは必ずしもデバイスピクセルではない

CSS ピクセルはウェブレイアウトに使用される単位であり、デバイスピクセルはラスターディスプレイまたは出力サーフェスを表します。両者の関係は、環境のスケール設定とキャプチャ動作に依存します。

The CSS の長さとビューポート単位 スタイルシートで使用可能な単位を定義します。CSS の寸法は、あらゆる環境において物理ディスプレイのピクセル数を保証するものとして解釈すべきではありません。

この違いはスクリーンショットにとって重要です。画像のラスタ寸法は、要求されたビューポートの寸法に加えてデバイススケールを反映している場合があります。スケールを考慮せずに 2 つのスクリーンショットを比較すると、同じレイアウトでもサイズが変化したように見えることがあります。

ビジュアルテストでは、画面サイズ、ビューポートサイズ、スケールを別々の入力として扱ってください。コンテンツ領域を狭くなるようにリサイズしたデスクトップブラウザはレスポンシブレイアウトのテストにはなりますが、それだけでは物理的なモバイルデバイスのあらゆる特性を再現することはできません。タッチ操作、ブラウザコントロール、およびデバイス固有のインタラクションには、それぞれ個別の評価が必要です。

ビューポート高さ単位は異なる表示条件を表す

ビューポート相対の CSS 単位を使うと、スタイルをブラウザーのビューポートの寸法に依存させることができ、モダンなビューポート単位は異なる表示条件を区別します。これらは、互換的な略記としてではなく、意図したレイアウト動作を基準に選択すべきです。

全高パネルはこの問題を示しています。モバイルページを移動するにつれて、ブラウザのコントロールが展開または折りたたまれる場合があります。安定したままであるべきパネルと、その時点で利用可能なスペースを追従すべきパネルでは、必要となる条件が異なります。どの単位を選ぶかは、デザイン上の判断の一部です。

初期のスクリーンショットだけでなく、実際に操作して確認してください。ナビゲーションを開き、フィールドにフォーカスし、コンテンツをスクロールして、重要なコントロールが引き続き操作可能かどうかを確認します。ページは読み込み時には正しく見えても、キーボードが表示された後に送信ボタンが切れて見えなくなる場合があります。

自動テストのために、どのブラウザーと表示状態が表現されているかを文書化してください。制御されたビューポートテストは、その環境での動作を確立します。それは、すべてのモバイルブラウザーのインターフェイスやキーボードが同一に動作することの証拠として記述されるべきではありません。

スクリーンショットの範囲が別の質問に答えている

スクリーンショットの範囲によって、ページのどの部分が画像になるかが決まります。ビューポートキャプチャ、ページ全体のキャプチャ、要素のキャプチャは、それぞれ非常に異なる証拠を生成しながらも、いずれも正しい場合があります。

ビューポートキャプチャは、現在のスクロール位置における現在表示中の領域を示します。これはオーバーレイの診断や、ユーザーがスクロール前に何を見られるかを把握するのに役立ちます。フルページキャプチャは、ツールがサポートするより大きなドキュメント範囲をカバーします。要素キャプチャはコンポーネントに焦点を当て、妨げとなるものを説明する周辺コンテキストを省略する場合があります。

画像を選ぶ前に、まず質問を定義してください。商品カードのタイポグラフィを比較するには、コンポーネントキャプチャで十分な場合があります。購入操作を覆う同意バナーを診断するには、周囲のページを保持します。長いドキュメントを保存するにはフルページ画像が役立つかもしれませんが、それによって、画面外のすべての要素にアクセスしたことや、すべての遅延読み込み要素が読み込まれたことが証明されるわけではありません。

関連するコンテンツの準備が整ってからキャプチャしてください。フォント、画像、非同期データ、アニメーションはジオメトリを変化させる可能性があります。同じ名目上の寸法を持つ2つのスクリーンショットでも、異なるアプリケーション状態を表し得るため、見た目の差異が誤解を招くことがあります。

レスポンシブテストはコンテンツのブレークポイントに従うべきです

レスポンシブテストでは、インターフェースが変化し、コンテンツが使いにくくなるポイントを検証する必要があります。人気デバイス名の短いリストは、アプリケーション固有のその境界の代わりにはなりません。

重要なブレークポイントの直前と直後のレイアウトを確認してください。長いナビゲーションラベル、異常に長いテーブル値、翻訳されたテキスト、空の状態を確認します。これらのバリエーションによって、典型的なレコードでは決して現れないオーバーフローが明らかになることがあります。

有用な結果には、テキストが引き続き読みやすいか、コントロールに引き続きアクセスできるか、意図したスクロールが意図したコンテナ内に収まっているかが含まれます。ページレベルの横スクロールバーは、ある要素がレイアウト境界からはみ出したことを示す場合があります。無関係なブラウザ設定で症状を隠すのではなく、原因となっている要素を確認してください。

フレームには独自のレイアウト境界がある

埋め込まれたフレームには、そのフレーム自身の利用可能領域に関連するドキュメントビューポートがあります。幅の広い親ページの中に幅の狭い埋め込みアプリケーションを含めることができるため、トップレベルのビューポートだけをテストすると、レイアウト上の問題の一部を見落とします。

この HTML iframe model は、通常の親ドキュメントコンテンツではなく、埋め込みドキュメントを定義します。子は独自のレスポンシブレイアウトとスクロール動作を持つことができます。

埋め込みウィジェットの場合は、トップレベルのレイアウトとフレームの寸法の両方を記録してください。親ウィンドウが広くてもフレームが狭いために、子アプリケーションがコンパクトなナビゲーションを表示していることがあります。親ビューポートを変更しても、埋め込みレイアウト次第ではフレームが変化する場合としない場合があります。

Scrapeless Agent Browser におけるビューポート計画

Scrapeless Agent Browser は、ドキュメント化された構成を通じてブラウザ環境の制御を公開しています。 Agent Browser display and fingerprint configuration は、画面関連の設定を計画する際に参照すべきであり、screen プロパティとページビューポートは依然として別個の概念として扱う必要があります。

定義されたレンダリングタスクには Agent Browser platform を使用し、実際のビューポートはサポートされたクライアントサーフェスによって設定します。意図した証拠を生成するために必要な作業と Scrapeless pricing を照らし合わせて確認してください。

「 iframe extraction with Playwright and Scrapeless 」の議論は、埋め込みドキュメントに関する背景を補足します。この記事は、デバイスエミュレーションテストや実行されたスクリーンショット比較の結果を報告するものではなく、それらを正しく指定する方法を例示しています。

結論

ビューポートはブラウザのプレゼンテーション境界であり、その意味は、議論がレイアウトについてなのか現在の可視領域についてなのかによって変わります。ビューポートの寸法、スケール、スクロール位置、キャプチャ範囲、ページの準備状態をまとめて記録してください。これらの入力によって、ビジュアル結果があいまいな画像サイズではなく、実際のインターフェース状態を示すことができます。