HTML <area> media Attribute
Example
<map name="image-map">
<area media="screen and (min-color-index:256)" target="_blank" alt="Computer" href="computer.png" coords="112,31,285,246" shape="rect">
</map>
Meaning
The media attribute is suggests the value should be used to indicate whether a destination is appropriate for screen, print, PDA, and so on.
This attribute is used to specify that the URL is designed for special devices (like iPhone), speech or print media.
This attribute can accept several values.
Only used if the href attribute is present.
Note: This attribute is purely advisory.
Standard Syntax
<area media="value">
Advertisement
Possible Operators
| Value | Description |
|---|---|
| and | AND operator |
| not | NOT operator |
| , | OR Operator |
Divices
| Value | Description |
|---|---|
| all | (Default) Suitable for all devices |
| aural | Speech synthesizers |
| braille | Braille feedback devices |
| handheld | Handheld devices (like small screen, limited bandwidth etc…) |
| projection | Projectors |
| Print preview pages. | |
| screen | Screen of the devices |
| tty | Teletypes and similar media using a fixed-pitch character grid |
| tv | Television devices |
Attribute Values
| Value | Description | Example |
|---|---|---|
| width | Specifies the width of the screen should targeted.min- and max- prefixes can be used. | media="screen and (min-width:320px) |
| height | Specifies the height of the screen should targeted.min- and max- prefixes can be used. | media="screen and (max-height:640px) |
| device-width | Specifies the width of the device screen should targeted.min- and max- prefixes can be used. | media="screen and (device-width:600px)" |
| device-height | Specifies the height of the device screen should targeted.min- and max- prefixes can be used. | media="screen and (device-height:600px)" |
| orientation | Specifies the orientation of the device value can be landscape or portrait | media="all and (orientation: portrait)" |
| aspect-ratio | Specifies the width/height of the screen should targeted.min- and max- prefixes can be used. | media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Specifies the device-width/device-height ratio of the screen should targeted.min- and max- prefixes can be used. | media="screen and (aspect-ratio:16/9)" |
| color | Specifies the bits per color of navigated page should be display. | media="screen and (color:4)" |
| color-index | Specifies the number of colors the navigated display can handle. min- and max- prefixes can be used. | media="screen and (min-color-index:256)" |
| monochrome | The bits per pixel in a monochrome frame buffer. min- and max- prefixes can be used. | media="screen and (monochrome:3)" |
| resolution | the pixel density (dpi or dpcm) of the navigated display. min- and max- prefixes can be used. | media="print and (resolution:200dpi)" |
| scan | Scanning method of a tv display. Values Can be "progressive" and "interlace". | media="tv and (scan:interlace)" |
| grid | the output device is grid or bitmap. Value can be "1" for grid, and "0" otherwise. | media="handheld and (grid:1)" |