このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

Sec-CH-Viewport-Width ヘッダー

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。

HTTP は Sec-CH-Viewport-Width リクエストヘッダーは端末クライアントヒントで、クライアントのレイアウトビューポートの幅を CSS ピクセル単位で提供します。 値は、その上の最も小さな整数に丸められます(すなわち、切り上げとなります)。

このヒントは、他の画面特定ヒントと組み合わせて使用することで、特定の画面サイズに最適化された画像を配信したり、特定の画面の幅では不要なリソースを省略したりすることができます。 メッセージ内に Sec-CH-Viewport-Width ヘッダーが複数回現れる場合、最後に現れたものが使用されます。

サーバーがクライアントから Sec-CH-Viewport-Width ヘッダーを受信するには、Accept-CH レスポンスヘッダーを送信して、この機能への参加を明示する必要があります。 この機能に参加するサーバーは、通常、Vary ヘッダーにもその旨を指定します。これにより、キャッシュに対して、サーバーがリクエストのヘッダー値に基づいて異なるレスポンスを送信することがあることが通知されます。

ヘッダー種別 リクエストヘッダー, クライアントヒント
禁止リクエストヘッダー いいえ

構文

http
Sec-CH-Viewport-Width: <number>

ディレクティブ

<number>

CSS ピクセル単位のユーザーのビューポートの幅を、最も近い整数に切り上げたものです。

例

Sec-CH-Viewport-Width の使用

サーバーが Sec-CH-Viewport-Width ヘッダーを受信するには、事前に、Accept-CH レスポンスヘッダーに Sec-CH-Viewport-Width レスポンスヘッダーを入れて送信し、オプトインしなければなりません。

http
Accept-CH: Sec-CH-Viewport-Width

その後のリクエストにおいて、クライアントは Sec-CH-Viewport-Width ヘッダーを送信する可能性があります。

http
Sec-CH-Viewport-Width: 320

仕様書

仕様書
Responsive Image Client Hints
# sec-ch-viewport-width

ブラウザーの互換性

関連情報