Houve um erro de script nesta página. Enquanto este erro é encaminhado para os editores do site, você pode ver o conteúdo parcial abaixo.

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

{{cssref}}

O recurso de mídia CSS {{cssxref("@media")} do modo de exibição pode ser usado para aplicar estilos com base no modo de exibição de um aplicativo. Você pode usar para prover uma consistente experiência de usuário entre abrir um site a partir de uma URL e um ícone desktop.

Esse recurso corresponde ao membro da exibição do manifesto do aplicativo da Web. Ambos aplicam-se ao contexto de navegação de nível superior e a qualquer contexto afilhado de navegação. O recurso de consulta aplica-se independentemente de onde um manifesto de aplicativo web está presente.

Sintaxe

O recurso display-mode é especificado como um valor de uma palavra chave escolhido da lista abaixo.

Display mode Description Fallback display mode
fullscreen All of the available display area is used and no user agent {{glossary("chrome")}} is shown. standalone
standalone The application will look and feel like a standalone application. This can include the application having a different window, its own icon in the application launcher, etc. In this mode, the user agent will exclude UI elements for controlling navigation, but can include other UI elements such as a status bar. minimal-ui
minimal-ui The application will look and feel like a standalone application, but will have a minimal set of UI elements for controlling navigation. The elements will vary by browser. browser
browser The application opens in a conventional browser tab or new window, depending on the browser and platform. (none)

Example

@media all and (display-mode: fullscreen) {
  body {
    margin: 0;
    border: 5px solid black;
  }
}

Specifications

Specification Status Comment
{{SpecName('Manifest', '#the-display-mode-media-feature', 'display-mode')}} {{Spec2('Manifest')}} Initial definition.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support {{ CompatChrome(46.0) }}[1] {{ CompatGeckoDesktop(47) }}[2] {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature Android Android Webview Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatGeckoDesktop(47) }}[2] {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatChrome(46.0) }}[1]

[1] Does not support the minimal-ui value. @supports for display-mode is only supported starting with Chrome 48.

[2] Only the fullscreen and browser values were supported in 47. minimal-ui and standalone were added in Firefox 57.

Etiquetas do documento e colaboradores

 Colaboradores desta página: FLR, deusmar
 Última atualização por: FLR,