Table of Content
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.
Viewport-Width header might look like
Viewport-Width: 1024, indicating a viewport width of 1024 pixels.
The Viewport-Width header only has one directive, which essentially is the pixel width of the viewport as a decimal number.
Examples of the Viewport-Width header look like this:
Viewport-Width: 1200 Viewport-Width: 768 Viewport-Width: 1366
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:
- Install the ModHeader extension from the Chrome Web Store.
- Click on the ModHeader icon in the extension bar at the top-right corner of the Chrome browser.
- A panel will open; here, click on the '+' button to create a new profile.
- In the Request Headers section, enter
Nameand enter your desired viewport width (in pixels) under
Value. For instance, if you want the viewport width to be 1920 pixels, you'd enter
This tactic is useful for testing how websites respond to different viewport sizes, making it a valuable tool for responsive design testing.