HTML <area> media attribute
คำอธิบายและวิธีใช้
media
คุณสมบัตินี้กำหนดสื่อหรืออุปกรณ์ที่เอกสารที่มีลิงก์ตั้งแต่นั้นปรับปรุง
คุณสมบัตินี้ใช้เพื่อกำหนด URL ปลายทางที่ถูกทำเพื่ออุปกรณ์พิเศษ (เช่น iPhone) หรือสื่อเสียงหรือสื่อพิมพ์
คุณสมบัตินี้สามารถรับค่าหลายตัว
มีข้อกำหนด href 属性 ใช้
注意:คุณสมบัตินี้เป็นความแนะนำเพียงแค่นั้น
ตัวอย่าง
ใช้คุณสมบัติ media ในการกำหนดสื่อ/อุปกรณ์ปลายทางที่ต้องการปรับปรุง URL
<map name="planetmap" <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html" media="screen and (min-color-index:256)" </map>
การใช้งาน
<area 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)" |
monochrome |
กำหนดจำนวนบิตของแต่ละพิกเซลในบรรทัดเฟรมของภาพดำ สามารถใช้คำหน้า "min-" และ "max-" ตัวอย่าง: media="screen and (monochrome:2)" |
resolution |
กำหนดความหนาแน่นของพิกเซลของหน้าจอเป้าหมาย/กระดาษ (dpi หรือ dpcm) สามารถใช้คำหน้า "min-" และ "max-" ตัวอย่าง: media="print and (resolution:300dpi)" |
scan |
กำหนดวิธีสแกนของหน้าจอแท้วดิสเพลย์ TV ค่าที่เป็นไปได้: "progressive" และ "interlace" ตัวอย่าง: media="tv and (scan:interlace)" |
grid |
กำหนดอุปกรณ์ออกที่เป็นแนวแบบหรือแบบบิตมาพ ค่าที่เป็นไปได้: "1" แสดงถึงแนวแบบ "0" แสดงถึงสิ่งอื่นๆ ตัวอย่าง: media="handheld and (grid:1)" |
การสนับสนุนเบราเซอร์
Chrome | Edge | Firefox | Safari | Opera |
---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera |
การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน | การสนับสนุน |