Atributo media do HTML <area>

Definição e uso

media A propriedade define qual tipo de mídia ou dispositivo foi otimizado para o documento vinculado.

Esta propriedade é usada para definir que o URL de destino é projetado para dispositivos específicos (como iPhone), mídia de voz ou mídia impressa.

Este atributo pode aceitar vários valores.

apenas quando existir Atributo href ao usar.

Atenção:Esta propriedade é puramente sugerencial.

Exemplo

Usar a propriedade media para especificar o tipo de mídia ou dispositivo para o qual o URL de destino está otimizado:

<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun"
  href="sun.html" media="screen and (min-color-index:256)"
</map>

Experimente pessoalmente

Sintaxe

<area media="value>

operadores possíveis

operadores Descrição
and define o operador AND.
not define o operador NOT.
, define o operador OR.

Dispositivo

Valor Descrição
all Padrão. Apropriado para todos os dispositivos.
aural Sintetizador de voz.
braille Dispositivo de feedback em braile.
handheld Dispositivo portátil (pequena tela, largura de banda limitada).
projection Projetor.
print Modo de visualização de impressão prevista/impressão de página.
screen Tela de computador.
tty Teletipo e mídias semelhantes que usam uma grade de caracteres de largura fixa.
tv Dispositivos de tipo TV (baixa resolução, capacidade de paginação limitada).

Valor

Valor Descrição
width

define a largura da área de exibição alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (min-width:500px"

height

define a altura da área de exibição alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (max-height:700px"

device-width

define a largura do monitor/papel alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (device-width:500px"

device-height

define a altura do monitor/papel alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (device-height:500px"

orientation

define a orientação do monitor/papel alvo.

valores possíveis: "portrait" ou "landscape"

Exemplo: media="all and (orientation: landscape"

aspect-ratio

define a proporção largura/altura da área de exibição alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (aspect-ratio:16/9"

device-aspect-ratio

define a proporção device-width/device-height do monitor/papel alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (aspect-ratio:16/9"

color

define o número de bits de cada cor do monitor alvo.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (color:3"

color-index

define o número de cores que o monitor alvo pode manipular.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (min-color-index:256"

monochrome

Define o número de bits por pixel em um buffer de frame monocromático.

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="screen and (monochrome:2)"

resolution

Define a densidade de pixels do monitor/papel alvo (dpi ou dpcm).

Prefixos "min-" e "max-" podem ser usados.

Exemplo: media="print and (resolution:300dpi)"

scan

Define o método de escaneamento do monitor TV.

Valores possíveis são: "progressive" e "interlace".

Exemplo: media="tv and (scan:interlace)"

grade

Define se o dispositivo de saída é grade ou bitmap.

Valores possíveis: "1" representa a grade, "0" é outro.

Exemplo: media="handheld and (grid:1)"

Suporte de navegador

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte