Verificação HTML: CSS: Funcionalidade de media depreciada "max-device-width". Para orientação, consulte a secção Funcionalidades de Media Depreciadas na especificação atual de Media Queries.

Sobre este problema HTML

As funcionalidades de media device-width e device-height (incluindo as suas versões prefixadas com min- e max-) foram originalmente concebidas 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 razão de píxeis do dispositivo. Quando os utilizadores redimensionavam a janela do navegador, estas funcionalidades 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 deprecia formalmente estas funcionalidades. 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 em modo de ecrã dividido. Também se comportam consistentemente entre dispositivos independentemente da densidade de píxeis.

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

Ao escolher valores de breakpoint, prefira breakpoints orientados pelo 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 depreciado que aciona o aviso

A funcionalidade de media max-device-width no bloco <style> aciona 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 funcionalidade depreciada 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)">

Substituindo consultas de razão de píxeis do dispositivo

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

<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

Funcionalidade depreciada	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`