Viewport-WidthViewport-Width는 클라이언트의 레이아웃 뷰포트 폭을 CSS 픽셀 단위 정수로 서버에 전달하는 클라이언트 힌트(Client Hint) 요청 헤더입니다. 서버가 화면 폭에 맞는 이미지·레이아웃을 골라 보낼 수 있게 합니다.
값은 뷰포트 폭(예: `Viewport-Width: 1280`)이며, 브라우저는 서버가 명시적으로 요청한 경우에만 이 헤더를 보냅니다.
클라이언트 힌트의 핵심 전제는 옵트인입니다. 브라우저는 이 헤더를 자동으로 보내지 않고, 서버가 먼저 `Accept-CH: Viewport-Width` 헤더(또는 메타 태그)로 '이 힌트를 원한다'고 광고해야 이후 요청부터 브라우저가 값을 실어 보냅니다. 프라이버시 핑거프린팅 표면을 줄이기 위한 설계입니다.
용도는 반응형 이미지 서버 협상입니다. 뷰포트 폭을 알면 서버가 적절한 해상도의 이미지를 골라 전송해 대역폭을 아낄 수 있어, HTML의 `srcset`/`sizes` 기반 클라이언트 선택을 서버 측으로 옮긴 형태입니다. 응답이 이 힌트에 따라 달라지면 `Vary: Viewport-Width`로 캐시 정확성을 지켜야 합니다.
표준화 과정에서 이 계열 힌트는 `Sec-CH-` 접두사가 붙은 새 이름(예: `Sec-CH-Viewport-Width`)으로 재정의되었습니다. 접두사 없는 구형 `Viewport-Width`·`Width`·`DPR`은 폐기 경로에 있어 일부 브라우저에서 지원이 제한되므로, 신규 구현은 `Sec-CH-*` 이름과 최신 반응형 이미지 기법을 우선 고려하는 것이 안전합니다.
Viewport-Width: <integer>e.g. Viewport-Width: 1280