Tweet
The attribute viewport-fit=cover is added to the <meta name="viewport"> tag to control how the content behaves when displayed on devices with cutout areas (such as notches, rounded corners, or sensor housings), which are common on modern smartphones. Explanation of viewport-fit=cover:
In summary, viewport-fit=cover allows content to utilize the full screen area on devices with cutouts, providing a more immersive experience.
- Purpose: It ensures that the webpage content can extend and cover the full screen, even into the areas near device notches or cutouts. Without this, content may be constrained to avoid these areas, potentially leaving blank spaces around the edges.
- Where it's useful: Primarily for mobile devices with irregular screens (e.g., iPhone X and later models or Android phones with notches or rounded corners).
- Without viewport-fit=cover: The browser might automatically adjust the content to avoid these cutout areas, leading to extra padding around the content, making it feel less "full screen."
- With viewport-fit=cover: The content is allowed to extend into all available space, covering the entire screen, including areas near cutouts.
- If you want a true fullscreen experience on mobile devices, especially for apps or websites designed with full-screen aesthetics in mind (e.g., games, video content, or immersive websites).
- Ensure that your design accounts for safe areas, so important content doesn’t get hidden behind notches or rounded corners.
In summary, viewport-fit=cover allows content to utilize the full screen area on devices with cutouts, providing a more immersive experience.