HTML <a> media 属性
定義と使用方法
media
属性は、リンクドキュメントがどの種類のメディアやデバイスに最適化されているかを定義します。
この属性は、特殊なデバイス(例えば iPhone)、音声や印刷媒体向けのターゲット URL を指定するために使用されます。
この属性は複数の値を受け入れます。
次のうちのいずれかで使用できます。 href 属性 存在する場合に使用してください。
注意:この属性は純粋に推奨的なものであります。
例
media 属性を設定したリンク:
<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)"> 打开用于打印的 media 属性页面 </a>
语法
<a media="value>
可能的运算符
运算符 | 描述 |
---|---|
and | 指定 AND 运算符。 |
not | 指定 NOT 运算符。 |
, | 指定 OR 运算符。 |
设备
值 | 描述 |
---|---|
all | 默认。适用于所有设备。 |
aural | 语音合成器。 |
braille | 盲文反馈装置。 |
handheld | 手持设备(小屏幕、有限的带宽)。 |
projection | 投影机。 |
打印预览模式/打印页面。 | |
screen | 计算机屏幕。 |
tty | 电传打字机以及使用等宽字符网格的类似媒介。 |
tv | 电视类型设备(低分辨率、有限的分页能力)。 |
值
值 | 描述 |
---|---|
width |
指定目标显示区域的宽度。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (min-width:500px)" |
height |
指定目标显示区域的高度。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (max-height:700px)" |
device-width |
指定目标显示器/纸张的宽度。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (device-width:500px)" |
device-height |
指定目标显示器/纸张的高度。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (device-height:500px)" |
orientation |
指定目标显示器/纸张的方向。 可能的值:"portrait" 或 "landscape" 例:media="all and (orientation: landscape)" |
aspect-ratio |
指定目标显示区域的宽度/高度比。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (aspect-ratio:16/9)" |
device-aspect-ratio |
指定目标显示器/纸张的 device-width/device-height 比率。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (aspect-ratio:16/9)" |
color |
指定目标显示器的每种颜色的位数。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (color:3)" |
color-index |
指定目标显示器能够处理的颜色数量。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (min-color-index:256)" |
モノクロ |
モノクロフレームバッファーでの各ピクセルのビット数を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="screen and (monochrome:2)" |
解像度 |
ターゲットディスプレイ/紙のピクセル密度(dpiまたはdpcm)を指定します。 「min-」および「max-」接頭辞を使用できます。 例:media="print and (resolution:300dpi)" |
スキャン |
TV 表示器のスキャン方法を指定します。 可能な値は "progressive" と "interlace" です。 例:media="tv and (scan:interlace)" |
グリッド |
出力デバイスがグリッドまたはビットマップであることを指定します。 可能な値:"1" はグリッド、"0" は他のものです。 例:media="handheld and (grid:1)" |
ブラウザのサポート
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
サポート | サポート | サポート | サポート | サポート |