Viewport Meta Tag

The viewport is the part of the webpage that can be currently seen within the open window. If the webpage is larger than the viewport, then scrollbars will allow the user to scroll the document through the viewport. Mobile devices are often much narrower than desktop web browser windows. To accommodate webpages that are not designed to be viewed at narrow sizes, a mobile web browser may use a virtual viewport that is larger than the actual size of the device and will scale it down to fit and then allow the user to scroll and zoom to navigate through the page. This is why some websites that you visit on your mobile phone have really tiny text that you can't read until you zoom in.

For example, an iPhone 14 has a width of 1170px mobile device and uses a 3X pixel ratio which gives the iPhone 14 web browser a viewport width of 390px. If a webpage is not designed for this narrow size, the browser may instead use a viewport width of 780px and then scale everything down by 2x to get it to fit. The result is that the entire webpage looks tiny and the user needs to pinch and swipe to zoom and pan around the webpage.

For a user to have the best experience, they will want to avoid all this pinching and swiping. It would be better if the website was built with a "responsive" design. This means that it will look good with any size of viewport, and as the viewport changes dimensions the contents of the website will smoothly adjust to keep everything usable. The user will not need to zoom in and will not need to scroll horizontally.

Here is an example of a "viewport" meta tag for a webpage that is designed to be responsive and work across a wide range of viewport sizes. In this example, the width is set to device-width which is a special value that instructs the browser to make the viewport width match the native width of the device. The initial-scale=1 value tells the web browser that it should not zoom in our out. Basically, this particular meta tag example tells the web browser to display the webpage as intended without using a virtual viewport.

<meta name="viewport" content="width=device-width, initial-scale=1" />

For more information, please read the documentation on MDN Web Docs.