English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The <a> media attribute is an HTML5 New attribute; this article introduces the usage of the <a> media attribute, online examples demonstrate how to use the <a> media attribute, browser compatibility, syntax definition, and detailed information about its attribute values, etc.
The following are links using the media attribute:
<a href="/tags/att-a-media.html?output=print" media="print and (resolution:300dpi)> Printable media attribute page</a>Test to see ‹/›
IEFirefoxOperaChromeSafari
All major browsers support the media attribute.
The media attribute specifies the type of media for which the linked document is targeted/optimized devices.
This attribute is used to specify that the target URL is designed for special devices (such as iPhone), voice, or print media.
This attribute can accept multiple values.
Use only when the href attribute exists.
Note: This attribute is purely advisory.
This attribute is HTML5 new attribute in.
<a media="value">
| Operators | Description |
|---|---|
| and | Define AND operator. |
| not | Define NOT operator. |
| , | Define OR operator. |
| Value | Description |
|---|---|
| all | Default. Suitable for all devices. |
| aural | Voice synthesizer. |
| braille | Braille feedback device. |
| handheld | Handheld devices (small screen, limited bandwidth). |
| projection | Projector. |
| Print preview mode/Printed page. | |
| screen | Computer screen. |
| tty | Teletype and similar media using a monospaced character grid. |
| tv | Television type devices (low resolution, limited pagination capabilities). |
| Value | Description |
|---|---|
| width | Define the width of the target display area. Can use "min-" and "max-" prefix. Example: media="screen and (min-width:500px)" |
| height | Define the height of the target display area. Can use "min-" and "max-" prefix. Example: media="screen and (max-height:700px)" |
| device-width | Specifies the target display./The width of the paper. Can use "min-" and "max-" prefix. Example: media="screen and (device-width:500px)" |
| device-height | Specifies the target display./The height of the paper. Can use "min-" and "max-" prefix. Example: media="screen and (device-height:500px)" |
| orientation | Specifies the target display./The orientation of the paper. Possible values: "portrait" or "landscape" Example: media="all and (orientation: landscape)" |
| aspect-ratio | Define the width of the target display area/height ratio. Can use "min-" and "max-" prefix. Example: media="screen and (aspect-ratio:16/9)" |
| device-aspect-ratio | Specifies the target display./The device of the paper-width/device-height ratio. Can use "min-" and "max-" prefix. Example: media="screen and (aspect-ratio:16/9)" |
| color | Define the bits per color of the target display. Can use "min-" and "max-" prefix. Example: media="screen and (color:3)" |
| color-index | Specifies the number of colors the target display can handle. Can use "min-" and "max-" prefix. Example: media="screen and (min-color-index:256)" |
| monochrome | Specifies the number of bits per pixel in monochrome frame buffer. Can use "min-" and "max-" prefix. Example: media="screen and (monochrome:2)" |
| resolution | Specifies the target display./Pixel density of the paper (dpi or dpcm). Can use "min-" and "max-" prefix. Example: media="print and (resolution:300dpi)" |
| scan | Specifies the scanning method of the TV display. Possible values are: "progressive" and "interlace". Example: media="tv and (scan:interlace)" |
| grid | Specifies whether the output device is a grid or bitmap. Possible values:"1" represents grid, "0" is for others. Example: media="handheld and (grid:1)" |