Search code examples
htmlcssmobile-safariviewport

CSS Extend Viewport into iPhone Status Bar on Safari

I have a website that uses an image as a header.

Website header using image

I'd like for this image to extend upward into the status bar to act as its background. When I scroll down my site, the content of the website cuts off right at the status bar. Based on this behavior, I assume it does not because the viewport does not extend into the status bar. Is this possible to achieve with CSS?

I have tried adding the following meta tags, but the page content still appears to cut off right at the status bar.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, viewport-fit=cover">

Thanks!

Solution

  • No this is not possible.

    On iOS and Android devices you can set the status bar to be a solid color, but that's all you can do with it.

    <meta name="theme-color" content="#C0FFEE">