HTTP Headers
Viewport Width
HTTP Header
Deprecated: This feature is no longer recommended. While some browsers may still support it, it might have already been removed from current web standards, be in the process of being dropped, or remain only for backward compatibility. Developers should avoid using it and update existing code when possible. For guidance, refer to the compatibility table at the bottom of this page. Be aware that this feature could stop functioning at any time.
Secure context: This feature is accessible exclusively within secure contexts (HTTPS), on supported browsers.
Non-standard: This feature does not conform to standard specifications and is not part of an official standards track. Do not deploy it on production websites, as it may not work universally. There could be significant differences in implementation, and its behavior may change over time.
Warning:
The Viewport-Width header has been removed from the client hints specification in draft-ietf-httpbis-client-hints-07.
Its proposed replacement is Sec-CH-Viewport-Width (Responsive Image Client Hints).
The HTTP Viewport-Width request header is a device client hint that communicates the width of the client’s layout viewport in CSS pixels.
The value is rounded up to the nearest integer, using the ceiling function.
This hint can be utilized alongside other screen-specific hints to deliver images optimized for a particular screen size, or to prevent resources that aren’t needed for certain widths from being sent.
If the Viewport-Width header appears multiple times in a message, the last occurrence takes precedence.
Servers must opt-in to receive the Viewport-Width header by sending the Accept-CH response header.
Servers that opt-in generally also specify this in the Vary header, informing caches that responses may vary based on this header’s value.
| Header type | Request header, Client hint |
|---|---|
| Forbidden request header | No |
Syntax
Viewports in web development are crucial for ensuring your website appears correctly across various devices. The syntax for setting the viewport width is as follows:
Viewport-Width: <number>
Directives
The width of the user’s viewport in CSS pixels, rounded up to the nearest integer.
Example
Examples
Using Viewport-Width
A server must first opt-in to receive the Viewport-Width header by sending the response header Accept-CH containing the directive Viewport-Width.
In subsequent requests, the client might send the Viewport-Width header:
Accept-CH: Viewport-Width
In subsequent requests, the client might send Viewport-Width header:
Viewport-Width: 320
How to Modify Header using Requestly
Requestly is a powerful Chrome extension that allows you to modify HTTP headers, including the Viewport-Width header.
This is especially useful for testing how your application adjusts layout and content for different device widths during development or debugging.
Steps to Modify the Viewport-Width Header:
- Install and open the Requestly Chrome extension. You can find it on the Chrome Web Store.
- Create a new rule: Click on “Create Rule” and choose “Modify Headers” from the list of available rule types.
- Add a new header modification:
- Under “Action”, select “Add” or “Override”.
- In the “Header Name” field, enter Viewport-Width.
- In the “Header Value” field, enter the desired width value (e.g., 1024).
- Set the URL condition: Specify the URL or pattern where this header change should apply (e.g., https://your-website.com/*).
- Save the rule.
Once set up, Requestly will inject the Viewport-Width header into all matching requests, allowing you to simulate different screen widths and test how your website or app responds to various viewport sizes.
Modifying the Viewport-Width header helps you understand how your content adapts to different device widths without needing physical devices. This makes it easier to debug responsive designs and improve user experience across screen sizes.
Table of Contents
- No headings found.
