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

🕒 อัปเดตล่าสุด: / เผยแพร่เมื่อ:
🏷️ Web Dev
ปรับเว็บไซต์ให้รองรับ 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 ด้วยครับ

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

Data on support for the meta-theme-color feature across the major browsers from caniuse.com

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