Verificação HTML: CSS: Feature media descontinuada "max-device-width". Para orientação, consulte a secção Deprecated Media Features na especificação atual de Media Queries.

Sobre este problema HTML

As features media device-width e device-height (incluindo as suas versões com prefixos min- e max-) foram originalmente projetadas para consultar as dimensões físicas do ecrã de um dispositivo. Na prática, isto causou problemas significativos. Em ecrãs de alta DPI (Retina), max-device-width podia reportar valores inesperados dependendo da proporção de píxeis do dispositivo. Quando os utilizadores redimensionavam a janela do navegador, estas features não respondiam porque o tamanho físico do ecrã nunca mudava. E com o zoom do navegador, o layout podia quebrar porque a consulta ainda referenciava as dimensões fixas do dispositivo em vez do espaço disponível real.

A especificação Media Queries Level 4 descontinuou formalmente estas features. Os navegadores modernos ainda as suportam para compatibilidade com versões anteriores, mas não devem ser usadas em código novo. O validador W3C levanta este aviso para encorajar a migração para o padrão atual.

Os equivalentes baseados no viewport — width, min-width e max-width — respondem ao viewport de layout do navegador. Isto significa que se adaptam corretamente quando o utilizador redimensiona a janela, faz zoom na página, ou visualiza a página num modo de ecrã dividido. Também se comportam consistentemente entre dispositivos independentemente da densidade de píxeis.

Se o seu código existente usar max-device-width ou min-device-width, a correção é direta: retire a palavra device do nome da feature. Por exemplo, max-device-width: 768px torna-se max-width: 768px. Se estava a confiar nas dimensões do dispositivo para detetar ecrãs de alta DPI, use a feature media resolution em vez disso (por exemplo, min-resolution: 2dppx), que é a substituição compatível com padrões para features com prefixos de fornecedor como -webkit-min-device-pixel-ratio.

Ao escolher valores de breakpoint, prefira breakpoints orientados por conteúdo — valores onde o seu layout realmente precisa de se adaptar — em vez de visar larguras específicas de dispositivos. Isto produz designs mais resilientes que funcionam bem em qualquer tamanho de ecrã.

Exemplos

Uso descontinuado que desencadeia o aviso

A feature media max-device-width no bloco <style> desencadeia o aviso do validador:

<!doctype html>
<html lang="en">
<head>
  <title>Deprecated Media Feature</title>
  <style>
    /* Deprecated: queries the physical device screen */
    @media only screen and (max-device-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>This page uses a deprecated media feature.</p>
</body>
</html>

O mesmo aviso aparece se a feature descontinuada for usada no atributo media de um elemento <link>:

<link rel="stylesheet" href="mobile.css" media="(max-device-width: 480px)">

Exemplo corrigido usando consultas baseadas no viewport

Substitua max-device-width por max-width para consultar o viewport em vez disso:

<!doctype html>
<html lang="en">
<head>
  <title>Viewport-Based Media Query</title>
  <style>
    /* Correct: responds to the viewport width */
    @media (max-width: 480px) {
      body {
        background: pink;
      }
    }
  </style>
</head>
<body>
  <p>This page uses a modern media feature.</p>
</body>
</html>

E para o elemento <link>:

<link rel="stylesheet" href="mobile.css" media="(max-width: 480px)">

Substituir consultas de proporção de píxeis do dispositivo

Se estava a usar features device-width juntamente com -webkit-min-device-pixel-ratio para visar ecrãs de alta DPI, mude para a feature padrão resolution:

<style>
  /* Deprecated approach */
  @media (-webkit-min-device-pixel-ratio: 2) {
    .logo {
      background-image: url("logo@2x.png");
    }
  }

  /* Standards-compliant replacement */
  @media (min-resolution: 2dppx) {
    .logo {
      background-image: url("logo@2x.png");
    }
  }
</style>

Referência rápida de substituições

Feature descontinuada	Substituição moderna
`max-device-width`	`max-width`
`min-device-width`	`min-width`
`max-device-height`	`max-height`
`min-device-height`	`min-height`
`-webkit-min-device-pixel-ratio: 2`	`min-resolution: 2dppx`