ไอคอนและสีของเบราว์เซอร์

เบราว์เซอร์สมัยใหม่ช่วยให้ปรับแต่งคอมโพเนนต์บางอย่าง เช่น ไอคอน สีแถบที่อยู่ และแม้แต่เพิ่มสิ่งต่างๆ เช่น ไทล์ที่กำหนดเอง ได้อย่างง่ายดาย การปรับแต่งง่ายๆ เหล่านี้จะช่วยเพิ่มการมีส่วนร่วมและดึงดูดผู้ใช้ให้กลับมาที่เว็บไซต์

เบราว์เซอร์สมัยใหม่ช่วยให้ปรับแต่งคอมโพเนนต์บางอย่าง เช่น ไอคอน สีแถบที่อยู่ และแม้แต่เพิ่มสิ่งต่างๆ เช่น ไทล์ที่กำหนดเอง ได้อย่างง่ายดาย การปรับแต่งง่ายๆ เหล่านี้จะช่วยเพิ่มการมีส่วนร่วมและดึงดูดผู้ใช้ให้กลับมาที่เว็บไซต์

มีไอคอนและการ์ดที่ยอดเยี่ยม

เมื่อผู้ใช้เข้าชมหน้าเว็บ เบราว์เซอร์จะพยายามดึงข้อมูลไอคอนจาก HTML ไอคอนอาจปรากฏในหลายตำแหน่ง เช่น แท็บเบราว์เซอร์ สวิตช์แอปล่าสุด หน้าแท็บใหม่ (หรือหน้าแท็บที่เข้าชมล่าสุด) และอื่นๆ

การใช้รูปภาพคุณภาพสูงจะทำให้เว็บไซต์เป็นที่รู้จักมากขึ้น ซึ่งจะช่วยให้ผู้ใช้ค้นพบเว็บไซต์ของคุณได้ง่ายขึ้น

หากต้องการรองรับเบราว์เซอร์ทั้งหมดอย่างเต็มรูปแบบ คุณจะต้องเพิ่มแท็ก 2-3 รายการลงในองค์ประกอบ <head> ของแต่ละหน้า

<!-- icon in the highest resolution we need it for -->
<link rel="icon" sizes="192x192" href="icon.png">

<!-- reuse same icon for Safari -->
<link rel="apple-touch-icon" href="ios-icon.png">

<!-- multiple icons for IE -->
<meta name="msapplication-square310x310logo" content="icon_largetile.png">

Chrome และ Opera

Chrome และ Opera ใช้ icon.png ซึ่งอุปกรณ์จะปรับขนาดเป็นขนาดที่จำเป็น นอกจากนี้ คุณยังระบุขนาดเพิ่มเติมเพื่อไม่ให้ระบบปรับขนาดโดยอัตโนมัติได้ด้วยการระบุแอตทริบิวต์ sizes

Safari

นอกจากนี้ Safari ยังใช้แท็ก <link> ที่มีแอตทริบิวต์ rel: apple-touch-icon เพื่อระบุไอคอนในหน้าจอหลัก

<link rel="apple-touch-icon" href="touch-icon-iphone.png">

PNG แบบไม่โปร่งใสขนาด 180 หรือ 192 พิกเซลสี่เหลี่ยมจัตุรัสเหมาะสําหรับ apple-touch-icon

ไม่แนะนำให้รวมหลายเวอร์ชันผ่านแอตทริบิวต์ sizes ก่อนหน้านี้ Safari สำหรับ iOS จะพิจารณาคีย์เวิร์ด -precomposed เพื่อหลีกเลี่ยงการเพิ่มเอฟเฟกต์ภาพ แต่ไม่จำเป็นต้องทำตั้งแต่ iOS 7

Internet Explorer และ Windows Phone

หน้าจอหลักแบบใหม่ของ Windows 8 รองรับเลย์เอาต์ที่แตกต่างกัน 4 แบบสำหรับเว็บไซต์ที่ปักหมุดไว้ และต้องใส่ไอคอน 4 รายการ คุณปล่อยเมตาแท็กที่เกี่ยวข้องไว้ได้หากไม่ต้องการสนับสนุนขนาดที่เจาะจง

<meta name="msapplication-square70x70logo" content="icon_smalltile.png">
<meta name="msapplication-square150x150logo" content="icon_mediumtile.png">
<meta name="msapplication-wide310x150logo" content="icon_widetile.png">

ไทล์ใน Internet Explorer

"เว็บไซต์ที่ปักหมุดไว้" และ "การ์ดข้อมูลแบบสด" แบบหมุนของ Microsoft นั้นแตกต่างจากการใช้งานอื่นๆ และอยู่นอกเหนือขอบเขตของคู่มือนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้างการ์ดข้อมูลสดได้ที่ MSDN

องค์ประกอบสีของเบราว์เซอร์

การใช้องค์ประกอบ meta ต่างๆ จะช่วยให้คุณปรับแต่งเบราว์เซอร์และแม้แต่องค์ประกอบของแพลตฟอร์มได้ โปรดทราบว่าฟีเจอร์บางอย่างอาจใช้งานได้ในบางแพลตฟอร์มหรือเบราว์เซอร์เท่านั้น แต่จะช่วยปรับปรุงประสบการณ์การใช้งานได้อย่างมาก

Chrome, Firefox OS, Safari, Internet Explorer และ Opera Coast ให้คุณกำหนดสีสำหรับองค์ประกอบของเบราว์เซอร์และแม้แต่แพลตฟอร์มได้โดยใช้เมตาแท็ก

สีธีมเมตาสําหรับ Chrome และ Opera

หากต้องการระบุสีธีมสำหรับ Chrome ใน Android ให้ใช้สีธีมเมตา

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#4285f4">
สีธีมที่กำหนดสไตล์แถบที่อยู่ใน Chrome

การจัดรูปแบบเฉพาะสำหรับ Safari

Safari ให้คุณจัดรูปแบบแถบสถานะและระบุรูปภาพเริ่มต้นได้

ระบุภาพเริ่มต้น

โดยค่าเริ่มต้น Safari จะแสดงหน้าจอว่างระหว่างที่โหลด และหลังจากโหลดหลายครั้งแล้ว ระบบจะแสดงภาพหน้าจอของสถานะก่อนหน้าของแอป คุณสามารถป้องกันปัญหานี้ได้ด้วยการบอกให้ Safari แสดงรูปภาพเริ่มต้นอย่างชัดเจน โดยเพิ่มแท็กลิงก์ที่มี rel=apple-touch-startup-image เช่น

<link rel="apple-touch-startup-image" href="icon.png">

รูปภาพต้องมีขนาดที่เจาะจงของหน้าจออุปกรณ์เป้าหมาย ไม่เช่นนั้นระบบจะไม่ใช้รูปภาพนั้น ดูรายละเอียดเพิ่มเติมได้ในหลักเกณฑ์ด้านเนื้อหาเว็บของ Safari

แม้ว่าเอกสารประกอบของ Apple จะมีข้อมูลเกี่ยวกับหัวข้อนี้ไม่มากนัก แต่ชุมชนนักพัฒนาแอปก็หาวิธีกำหนดเป้าหมายไปยังอุปกรณ์ทั้งหมดได้โดยใช้ Media Query ขั้นสูงเพื่อเลือกอุปกรณ์ที่เหมาะสม แล้วระบุรูปภาพที่ถูกต้อง นี่เป็นโซลูชันที่ใช้งานได้ ขอขอบคุณGist ของ tfausak

เปลี่ยนลักษณะที่ปรากฏของแถบสถานะ

คุณเปลี่ยนลักษณะที่ปรากฏของแถบสถานะเริ่มต้นเป็น black หรือ black-translucent ได้ เมื่อใช้ black-translucent แถบสถานะจะลอยอยู่ด้านบนของเนื้อหาแบบเต็มหน้าจอแทนที่จะดันเนื้อหาลง วิธีนี้จะทำให้เลย์เอาต์สูงขึ้น แต่บดบังส่วนบน รหัสที่จำเป็นมีดังนี้

<meta name="apple-mobile-web-app-status-bar-style" content="black">

ภาพหน้าจอที่ใช้สีดำโปร่งแสง
ภาพหน้าจอโดยใช้ black-translucent

ภาพหน้าจอที่ใช้สีดํา
ภาพหน้าจอโดยใช้ black