Android 9 Pie版Chrome的viewport-fit=cover表现：是标准还是过渡？

Great question—let's unpack this behavior difference and your core concerns clearly:

The Key Behavior Gap #

First, let's confirm what you've observed is totally accurate:

• iPhone X Safari: To stretch content edge-to-edge (including under the notch) and protect your actual content, you use this setup:

  <meta name="viewport" content="width=device-width, viewport-fit=cover">
  <style>
    body {
      padding-top: env(safe-area-inset-top);
    }
  </style>
  

  The viewport-fit=cover makes content fill the entire screen, and env(safe-area-inset-top) adds padding to keep content from being blocked by the notch.
• Android 9 Pie Chrome: Even with viewport-fit=cover set, the "corner" areas around the notch stay in a "safe" state—they'll show the browser's default gray background or the color you defined with <meta name="theme-color">. The CSS safe area constants don't work here because there's no page content being covered by the notch in the first place.

Is This Standard Behavior or a Transition Phase? #

This is Android's intentional standard behavior, not a temporary step toward matching Safari. Android and iOS have fundamentally different design philosophies around notch adaptation:

• iOS prioritizes full-screen content by default (when viewport-fit=cover is enabled), putting responsibility on developers to use safe area constants to protect content from the notch.
• Android treats the notch as part of the system's status bar area. Browsers like Chrome will avoid rendering web content under the notch by default—this aligns with Google's Android design guidelines, which aim to prevent accidental content occlusion without explicit developer opt-in.

Can You Force Android Chrome to Extend Content Under the Notch? #

If you specifically want your page to fill the entire screen (including under the notch) on Android, you'll need more than just viewport-fit=cover:

• Add <meta name="mobile-web-app-capable" content="yes"> to enable full-screen web app mode.
• Keep in mind that this goes against Android's default behavior, so you'll need to test thoroughly across devices. You'll also want to use the same CSS safe area constants as iOS to make sure critical content isn't hidden by the notch.

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