เบราว์เซอร์ที่ทันสมัยช่วยให้ปรับแต่งองค์ประกอบบางอย่างได้อย่างง่ายดาย เช่น ไอคอน สีแถบที่อยู่ และเพิ่มสิ่งต่างๆ อย่างเช่น ชิ้นส่วนแผนที่ที่กำหนดเอง การปรับแต่งง่ายๆ เหล่านี้สามารถเพิ่มการมีส่วนร่วมและนำผู้ใช้กลับมายังเว็บไซต์ของคุณได้
เบราว์เซอร์ที่ทันสมัยช่วยให้ปรับแต่งองค์ประกอบบางอย่างได้อย่างง่ายดาย เช่น ไอคอน สีแถบที่อยู่ และเพิ่มสิ่งต่างๆ อย่างเช่น ชิ้นส่วนแผนที่ที่กำหนดเอง การปรับแต่งง่ายๆ เหล่านี้สามารถเพิ่มการมีส่วนร่วมและนำผู้ใช้กลับมายังเว็บไซต์ของคุณได้
มอบไอคอนและชิ้นส่วนภาพสวยๆ
เมื่อผู้ใช้เข้าชมหน้าเว็บของคุณ เบราว์เซอร์จะพยายามดึงข้อมูลไอคอนจาก 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 มีให้ใช้งานมากกว่าการใช้งานแบบอื่นๆ และอยู่นอกเหนือขอบเขตของคู่มือนี้ ดูข้อมูลเพิ่มเติมได้ที่วิธีสร้างการ์ดสดของ 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 จะมีเนื้อหาน้อยลง แต่ชุมชนนักพัฒนาซอฟต์แวร์ได้คิดหาวิธีกำหนดเป้าหมายอุปกรณ์ทั้งหมดโดยใช้คำค้นหาสื่อขั้นสูงเพื่อเลือกอุปกรณ์ที่เหมาะสมแล้วจึงระบุรูปภาพที่ถูกต้อง นี่คือโซลูชันที่ใช้ได้ซึ่งได้มาจาก tfausak's gist
เปลี่ยนลักษณะที่ปรากฏของแถบสถานะ
คุณสามารถเปลี่ยนรูปลักษณ์ของแถบสถานะเริ่มต้นเป็น black หรือ black-translucent เมื่อใช้ black-translucent แถบสถานะจะลอยอยู่เหนือเนื้อหาแบบเต็มหน้าจอ
แทนที่จะดันเนื้อหาลงไป การทำเช่นนี้ทำให้เลย์เอาต์มีความสูงมากขึ้น
แต่บังด้านบน รหัสที่ต้องใช้มีดังนี้
<meta name="apple-mobile-web-app-status-bar-style" content="black">
black-translucent
black