The browser’s viewport is the area of the window in which web content can be seen. This is often not the same size as the rendered page, in which case the browser provides scrollbars for the user to scroll around and access all the content. Narrow screen devices (e.g. mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. This virtual viewport is a way to make non-mobile-optimized sites in general look better on narrow screen devices.

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

The width property controls the size of the viewport. The special value device-width, which is the width of the screen in CSS pixels at a scale of 100%. The initial-scale property controls the zoom level when the page is first loaded.

References:

  • https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
  • https://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
  • https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
  • https://www.quirksmode.org/mobile/viewports2.html
  • https://docs.adobe.com/content/help/en/target/using/experiences/vec/mobile-viewports.html