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

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

Paul Bakaus

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

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

เมื่อผู้ใช้เข้าชมหน้าเว็บ เบราว์เซอร์จะพยายามดึงข้อมูลไอคอนจาก 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

"เว็บไซต์ที่ปักหมุด" และ "Live Tiles" แบบหมุนของ 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">

การจัดรูปแบบเฉพาะของ Safari

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

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

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

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

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

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

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

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

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