Atributo media de la fuente
Definición y uso
media Establece o devuelve el valor del atributo media del elemento <source>.
Atributo media del elemento <source> Define el tipo de recursos de medios (para qué tipos de medios / dispositivos está optimizado el archivo).
El navegador puede usar la propiedad media para determinar si puede reproducir el archivo. Si no puede, puede optar por no descargarlo.
Manual de referencia de HTML:Etiqueta <source> de HTML
Ejemplo
Devuelve para qué tipos de medios / dispositivos está optimizado el archivo específico:
var x = document.getElementById("mySource").media;
Sintaxis
Devolver la propiedad media:
sourceObject.media
Configurar la propiedad media:
sourceObject.media = value
Notas:Esta propiedad puede aceptar múltiples valores.
Operadores posibles
| Valor | Descripción |
|---|---|
| and | Operador AND. |
| not | Operador NOT. |
| , | Operador OR. |
Dispositivo
| Valor | Descripción |
|---|---|
| all | Adecuado para todos los dispositivos. Predeterminado. |
| aural | Sintetizador de voz. |
| braille | Dispositivo de retroalimentación en braille. |
| handheld | Dispositivo portátil (pantalla pequeña, ancho de banda limitado). |
| proyección | Proyector |
| Modo de previsualización de impresión / página de impresión. | |
| screen | Pantalla de computadora. |
| tty | Máquinas telegráficas y otros medios que utilizan una rejilla de caracteres con espaciado fijo. |
| tv | Dispositivos de tipo televisión (baja resolución, capacidad de desplazamiento limitada). |
Valor del atributo
| Valor | Descripción |
|---|---|
| width |
Se especifica el ancho de la región de visualización objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (min-width:500px)" |
| height |
Se especifica la altura de la región de visualización objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (max-height:700px)" |
| device-width |
Se especifica el ancho del monitor/papel objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (device-width:500px)" |
| device-height |
Se especifica la altura del monitor/papel objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (device-height:500px)" |
| orientation |
Se especifica la orientación del monitor/papel objetivo. Valores posibles: "portrait" o "landscape". Ejemplo: media="all and (orientation: landscape)" |
| aspect-ratio |
Se especifica la relación ancho/alto de la región de visualización objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio |
Se especifica la relación ancho/alto del ancho del dispositivo/papel objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (aspect-ratio:16/9)" |
| color |
Se especifica el número de bits por color del monitor objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (color:3)" |
| color-index |
Se especifica el número de colores que puede manejar el monitor objetivo. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (min-color-index:256)" |
| monochrome |
Se especifica el número de bits por píxel en el búfer de frame monocromático. Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="screen and (monochrome:2)" |
| resolution |
Se especifica la densidad de píxeles del monitor/papel objetivo (dpi o dpcm). Se pueden usar los prefijos "min-" y "max-". Ejemplo: media="print and (resolution:300dpi)" |
| scan |
Se especifica el método de escaneo del monitor de televisión. Los valores posibles son "progressive" y "interlace". Ejemplo: media="tv and (scan:interlace)" |
| grid |
Se especifica si el dispositivo de salida es una malla o un mapa de bits. Los valores posibles para la malla son "1", de lo contrario son "0". Ejemplo: media="handheld and (grid:1)" |
Detalles técnicos
| Valor de retorno: | Valor de cadena que representa el tipo de recurso multimedia. |
|---|
Compatibilidad del navegador
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Compatibilidad | Compatibilidad | Compatibilidad | Compatibilidad | Compatibilidad |
Notas:Sin embargo, ningún navegador principal admite el atributo media de HTML.
Páginas relacionadas
Manual de referencia de HTML:Atributo media del elemento <source> de HTML
