ปรับเว็บไซต์ให้รองรับ theme-color ใน Chrome

Chrome 39 สำหรับแอนดรอยด์เพิ่มการรองรับเมตาแท็ก theme-color ทำให้สามารถปรับสีแถบเครื่องมือของ Chrome เมื่อเปิดเว็บของเราได้ตามใจชอบ

ขั้นตอนการใช้งานนั้นง่ายมาก เพียงเพิ่มเมตาแท็กเข้าไป 1 บรรทัดภายในแท็ก ของเว็บไซต์ดังนี้

<meta name="theme-color" content="#โค้ดสี">

และเมื่อเปิดเว็บโดยใช้ Chrome บนแอนดรอยด์ ตัวแถบเครื่องมือก็จะเปลี่ยนสีไปตามที่เรากำหนด อันนี้เป็นตัวอย่างของ Facebook ครับ

ภาพตัวอย่างการใช้งาน theme-color ของ Facebook

อัปเดต: นอกจาก Chrome แล้ว เบราว์เซอร์อื่นๆ ที่มีพื้นฐานจาก Chromium เช่น Brave, Samsung Internet Browser ก็รองรับเช่นกัน รวมถึงแอป Google บน iOS ด้วยครับ

ข้อมูลเบราว์เซอร์ที่รองรับ

Web Share API บน Can I Use

อ่านเพิ่มเติมบน Google Developers

1 ความคิดเห็น

แสดงความคิดเห็น