The media attribute on an <a> tag specifies the media or device type the link is optimized for.
This attribute accepts multiple media or device type values combined with logical conditions (and, or, not).
A media attribute on an <a> tag.
It states that the Wikipedia page is optimized for 1440-pixel screens.
Go to <a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank"
media="screen and (device-width: 1440px)">Wikipedia</a>.
The media attribute specifies the media or device type the linked page or resource is optimized for.
This attribute specifies that a page or resource is designed for certain mobile devices, print media, and others.
media accepts multiple media or device type values combined with logical conditions (and, or, not).
Note: The media attribute requires that href has a value.
<a href="URL" media="expression" />
Operator | Description |
---|---|
and | Specifies an AND operator |
, (comma) | Specifies an OR operator |
not | Specifies a NOT operator |
Device | Description |
---|---|
all | Suitable for all devices. This is the default. |
aural | Speech synthesizers |
braille | Braille feedback devices -- for the visually impaired |
handheld | Handheld devices with small screens and limited bandwidth |
projection | Projector devices |
Printed pages or in print-preview mode | |
screen | Computer screens |
tty | Teletypes and similar devices using a fixed-pitch character grid |
tv | Television type devices with low resolution and limited scrolling |
Name | Value | Description |
---|---|---|
width | pixels |
Width of targeted display. Name can be prefixed with min- or max-. |
height | pixels |
Height of targeted display. Name can be prefixed with min- or max-. |
device-width | pixels |
Width of the device or paper. Name can be prefixed with min- or max-. |
device-height | pixels |
Height of the device or paper. Name can be prefixed with min- or max-. |
orientation | landscape, portrait |
Orientation of the device or paper. |
aspect-ratio | width/height |
Ratio of width/height of the targeted display. Name can be prefixed with min- or max-. |
device-aspect-ratio | width/height |
Ratio of width/height of the device or paper. Name can be prefixed with min- or max-. |
color | integer |
Bits per color of targeted display. Name can be prefixed with min- or max-. |
color-index | integer |
Number of colors the targeted display supports. Name can be prefixed with min- or max-. |
monochrome | integer |
Bits per pixel in a monochrome frame buffer. Name can be prefixed with min- or max-. |
resolution | dpi or dpcm |
Pixel density of the targeted display or paper. Name can be prefixed with min- or max-. |
scan | progressive interlace |
Scanning method of a tv display. |
grid | 1 = grid 0 = otherwise |
Whether output device is a grid or bitmap type. |
Some examples of valid media value expressions:
media="all and (orientation: portrait)"
media="screen and (aspect-ratio: 16/10)"
media="screen , (device-height: 540px)"
media="screen , (aspect-ratio: 5/4)"
media="screen and not (min-color-index: 512)"
media="screen and (min-width: 1200px)"
media="screen and (max-height: 720px)"
media="handheld and (grid: 1)"
media="tv and (scan: interlace)"
media="print and (resolution: 400dpi)"
media="screen and (max-monochrome: 2)"
media="screen and not (device-width: 360px)"
media="screen , (color: 8)"
Here is when media support started for each browser:
Chrome
|
1.0 | Sep 2008 |
Firefox
|
1.0 | Sep 2002 |
IE/Edge
|
1.0 | Aug 1995 |
Opera
|
1.0 | Jan 2006 |
Safari
|
1.0 | Jan 2003 |
Back to <a>