Atributo media de <area> en HTML
Definición y uso
media
La propiedad especifica para qué tipo de medio o dispositivo se ha optimizado el documento enlazado.
Esta propiedad se utiliza para determinar si la URL de destino está diseñada para dispositivos especiales (como iPhone), medios de voz o impresión.
Esta propiedad puede aceptar múltiples valores.
sólo cuando existe Atributo href se utiliza.
Atención:Esta propiedad es puramente sugerente.
Ejemplo
Se especifica el medio o dispositivo para optimizar la URL de destino utilizando la propiedad media:
<map name="planetmap"> <area shape="rect" coords="0,0,114,576" alt="Sol" href="sun.html" media="screen and (min-color-index:256)" </map>
Sintaxis
<area media="valor>
Operadores posibles
Operadores | Descripción |
---|---|
and | Define el operador AND. |
not | Define el operador NOT. |
, | Define el operador OR. |
Dispositivo
Valor | Descripción |
---|---|
all | Predeterminado. Adecuado para todos los dispositivos. |
aural | Sintetizador de voz. |
braille | Dispositivo de retroalimentación en braille. |
handheld | Dispositivos portátiles (pantalla pequeña, ancho de banda limitado). |
projection | Proyector. |
Modo de vista previa de impresión/página de impresión. | |
screen | Pantalla de computadora. |
tty | Máquinas telegráficas y otros medios que utilizan una cuadrícula de caracteres de ancho fijo. |
tv | Dispositivos de tipo televisión (baja resolución, capacidad de paginación limitada). |
Valor
Valor | Descripción |
---|---|
width |
Define el ancho de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (min-width:500px)" |
height |
Define la altura de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (max-height:700px)" |
device-width |
Define el ancho del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (device-width:500px)" |
device-height |
Define la altura del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (device-height:500px)" |
orientation |
Define la orientación del monitor/papel objetivo. Valores posibles: "portrait" o "landscape" Ejemplo: media="all and (orientation: landscape)" |
aspect-ratio |
Define la proporción ancho/alto de la área de visualización objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio |
Define la proporción device-width/device-height del monitor/papel objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
color |
Define el número de bits de cada color en el monitor objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (color:3)" |
color-index |
Define el número de colores que puede manejar el monitor objetivo. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (min-color-index:256)" |
Monocromático |
Se especifica el número de bits por píxel en el búfer de cuadros monocromáticos. Se pueden usar prefijos "min-" y "max-". Ejemplo: media="screen and (monochrome:2)" |
Resolución |
Se especifica la densidad de píxeles del monitor/papel objetivo (dpi o dpcm). Se pueden usar prefijos "min-" y "max-". Ejemplo: media="print and (resolution:300dpi)" |
Escaneo |
Se especifica el método de escaneo del monitor tv. Los valores posibles son: "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)" |
Cuadrícula |
Se especifica si el dispositivo de salida es una cuadrícula o un mapa de bits. Valores posibles: "1" representa la cuadrícula, "0" es otro. Ejemplo: media="handheld and (grid:1)" |
Compatibilidad con navegadores
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
Soporte | Soporte | Soporte | Soporte | Soporte |