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>
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. |
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 |