Viewport-Width Header

Table of Content

• Syntax
• Directives
• Examples
• Browser Compatibility
• How to modify Viewport-Width header

The Viewport-Width header is used by the server to determine the physical width (pixels) of the client's (or user's) viewport for layout purposes. Both server-side and client-side websites heavily depend on this functionality. It helps to generate a responsive design, which provides an optimized browsing experience for the users.

Syntax

Viewport-Width: <number>Copy

A typical Viewport-Width header might look like Viewport-Width: 1024, indicating a viewport width of 1024 pixels.

Directives

The Viewport-Width header only has one directive, which essentially is the pixel width of the viewport as a decimal number.

Examples

Examples of the Viewport-Width header look like this:

Viewport-Width: 1200
Viewport-Width: 768
Viewport-Width: 1366Copy

Browser Compatibility

How to modify Viewport-Width header

ModHeader is a Google Chrome extension that allows users to modify and add HTTP request headers. To adjust the Viewport-Width header using ModHeader, follow these steps:

1. Install the ModHeader extension from the Chrome Web Store.
2. Click on the ModHeader icon in the extension bar at the top-right corner of the Chrome browser.
3. A panel will open; here, click on the '+' button to create a new profile.
4. In the Request Headers section, enter Viewport-Width under Name and enter your desired viewport width (in pixels) under Value. For instance, if you want the viewport width to be 1920 pixels, you'd enter 1920.

This tactic is useful for testing how websites respond to different viewport sizes, making it a valuable tool for responsive design testing.