CSS display-mode Media Feature

Definition and Usage

The display-mode media feature tests how the web app is shown: a normal browser tab, an installed PWA, fullscreen, or other presentation modes.

PWAs often set a preferred mode with the Web App Manifest display member. Fullscreen and Picture-in-Picture can also come from browser APIs. This is not the same as the display property, which controls element layout.

CSS Syntax

Always wrap the feature in parentheses. Example: @media (display-mode: standalone) { … }

Feature Values

How to Use display-mode

Style for a normal tab first, then enhance for installed or fullscreen contexts.

1. Ship a good default layout for browser (everyday tabs).
2. Add @media (display-mode: standalone) for installed PWA tweaks (hide install UI, adjust safe areas).
3. Optional: style fullscreen, minimal-ui, or newer modes when your app uses them.
4. Combine with other queries when needed (for example prefers-color-scheme inside Picture-in-Picture).

Live Preview

This page’s current display-mode, via matchMedia. In a normal tab you should see browser match.

CSS Examples

Each snippet focuses on display-mode. Extra styles stay minimal for study. Use Try It Yourself for a live editor.

<style>
  .install {
    padding: 8px;
    background: #fef3c7;
  }

  @media (display-mode: standalone) {
    .install {
      display: none;
    }
  }
</style>

<p class="install">Install this app for a home-screen icon.</p>
<p>Main content</p>

<style>
  body {
    margin: 16px;
  }

  @media (display-mode: fullscreen) {
    body {
      margin: 0;
      border: 5px solid #0f172a;
    }
  }
</style>

<p>App content</p>

<style>
  .banner {
    display: none;
    padding: 8px;
    background: #dbeafe;
  }

  @media (display-mode: browser) {
    .banner {
      display: block;
    }
  }
</style>

<p class="banner">You are in a browser tab.</p>
<p>Main content</p>

Key Takeaways