The media attribute on an <area> tag specifies the media or device 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 <area> tag.
The attribute value states that Google is optimized for 1440-pixel screens.
Click the monitor area to invoke the link.
<img src="/img/html/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area media="screen and (device-width: 1440px)"
shape="rect"
coords="253,142,16,2"
alt="monitor"
target="_blank"
href="http://google.com/search?q=monitor">
</map>
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.
<area 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 |
