如何适配Safari移动端导航栏，实现全屏Web App正常显示？

Hey there! I’ve fought this exact battle with Safari mobile’s persistent top navigation and bottom toolbar—those elements can totally wreck a full-screen layout, even after trying every trick in the book. Let’s walk through how to calculate heights properly and work around these bars effectively.

First: Understanding the Height Values You Need #

Let’s break down the key properties to get the heights you’re after:

1. Total Device Screen Height (Including Safari’s Bars) #

If you need the full physical height of the device (including both the hidden and visible Safari UI bars), use:

const totalScreenHeight = window.screen.height;

This gives you the fixed height of the device’s display, regardless of what Safari is showing.

2. Current Visible Viewport Height (Excluding Visible Bars) #

To get the height of the area your app can actually use right now (with Safari’s bars visible or hidden), use:

const currentViewportHeight = window.innerHeight;

This value changes dynamically—when the user scrolls and Safari hides its bars, innerHeight will increase to fill that extra space.

3. "Full-Screen" Height (After Bars Hide) #

If you want the maximum height your app can reach when Safari’s bars are hidden, you can listen for resize events to capture the peak innerHeight value:

let maxViewportHeight = window.innerHeight;

window.addEventListener('resize', () => {
  if (window.innerHeight > maxViewportHeight) {
    maxViewportHeight = window.innerHeight;
  }
});

Now maxViewportHeight will hold the height of the viewport when Safari’s bars are fully hidden.

Fixing Layout Issues (Even With Bars Present) #

Since we can’t remove Safari’s bars entirely, here are practical fixes to make your app feel full-screen:

• Use viewport-fit=cover in your meta tag: This tells Safari to extend your app’s layout to the edges of the screen, ignoring the safe areas (you’ll handle those manually). Add this to your <head>:

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

• Avoid 100vh for full-screen elements: Safari’s vh unit can be inconsistent because it doesn’t account for the dynamic bar height. Instead, use min-height: -webkit-fill-available in CSS for elements that need to span the full viewport:

  .full-screen-element {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  

• Prevent content from being blocked by bars: Use Safari’s env() variables to add padding around safe areas. For example, to keep bottom content above the toolbar:

  .bottom-content {
    padding-bottom: env(safe-area-inset-bottom);
  }
  

  You can also use env(safe-area-inset-top) for the top navigation bar.

• Trigger bar hiding automatically: Safari hides its bars when the user scrolls down. You can add a tiny initial scroll to trigger this on page load (use sparingly, as it can feel jarring if overdone):

  window.addEventListener('load', () => {
    window.scrollTo(0, 1);
  });
  

I hope these tips help you finally get that smooth full-screen experience in Safari mobile—you’re not alone in this struggle!

内容的提问来源于stack exchange，提问作者Coco