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

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

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

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

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

เราไม่แนะนำให้รวมหลายเวอร์ชันผ่านแอตทริบิวต์ 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 และหมุน "Live Tile" ไปไกลกว่าอื่นๆ และอยู่นอกเหนือขอบเขตของคู่มือนี้ ดูข้อมูลเพิ่มเติม ที่ 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 จะไม่มีเนื้อหาเกี่ยวกับหัวข้อนี้ แต่ชุมชนนักพัฒนาแอป ได้หาวิธีกำหนดเป้าหมายอุปกรณ์ทั้งหมด โดยใช้การค้นหาสื่อขั้นสูงเพื่อ เลือกรูปภาพที่เหมาะสม จากนั้นระบุรูปภาพที่ถูกต้อง ต่อไปนี้คือ การแก้ไขปัญหา จาก tfausak's gist

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

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

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

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

วันที่ ภาพหน้าจอโดยใช้สีดำ
ภาพหน้าจอจาก black