Attribute viewport-fit=cover

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • megri
    Administrator

    • Mar 2004
    • 952

    Attribute viewport-fit=cover

    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:
    • 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).
    Common Scenarios:
    1. 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."
    2. With viewport-fit=cover: The content is allowed to extend into all available space, covering the entire screen, including areas near cutouts.
    When to Use It:
    • 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.
    Parveen K - Forum Administrator
    SEO India - TalkingCity Forum Rules - Webmaster Forum
    Please Do Not Spam Our Forum
Working...