Link HTTP header can have a "media" parameter that specifies which media the resource applies to.
For example, if there’re the following HTTP headers,
narrow.css is applied if the viewport width is less than 640px, otherwise
wide.css is applied.
Link: <narrow.css>; rel="stylesheet"; media="(max-width:639px)" Link: <wide.css>; rel="stylesheet"; media="(min-width:640px)"
However, browsers cannot evaluate media queries that depend on viewport dimensions without preprocessing the HTTP response body, because viewport dimensions are determined by the viewport
<meta> element or the @viewport rule.
This is especially problematic with
Link rel=preload headers, because its purpose is to initiate a resource load as early as possible, but browsers have to delay them until viewport dimensions are fixed.
Today we don’t have an HTTP header-based mechanism to set a viewport. While it is not an http-equiv, couldn’t we just map the
<meta name=viewport> into a
Viewport header? For example:
Viewport: width=device-width, initial-scale=1
The header value would be processed in the same way as the
<meta> viewport, as if it came before any
<style> elements. Because of this, the Viewport header may be later overridden by ones set by
<meta> viewport tags in the response body, but
Viewport header would be a strong hint for browsers to start fetching resources for
Link headers with media queries.