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