icon เว็บไซต์ในคอมพิวเตอร์ (Chrome)
icon เว็บไซต์ใน iPhone (Safari)
ขนาด icon เว็บไซต์
อันดับแรกเราต้องรู้ขนาด icon ของแต่ละรุ่นก่อน เพราะในแต่ละรุ่นหน้าจอจะมีขนาดแตกต่างกัน ซึ่งมีขนาดตามตารางครับ
| iPhone 6s, iPhone 6, iPhone SE | 120px by 120px |
|---|---|
| iPhone 6s Plus, iPhone 6 Plus | 180px by 180px |
| iPad, iPad mini | 152px by 152px |
| iPad Pro | 167px by 167px |
วิธีตั้ง icon
กำหนดขนาดที่ต้องการโดยดูตามขนาดของจอ แล้วใส่โค้ด โดยต้องกำหนด rel="apple-touch-icon" กำกับเพื่อให้รู้ว่าเป็น icon สำหรับ iPhone หรือ iPad ตัวอย่างตามโค้ดข้างล่าง
<link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="180x180" href="touch-icon-iphone-plus.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="167x167" href="touch-icon-ipad-pro.png">*ถ้าไม่ได้กำหนด size ไว้ ขนาดจะตั้งอยู่มาตรฐานที่ 60 x 60
โดยนำโค้ดใส่ในระหว่าง tag HEAD
<head>...</head>
แถม! โค้ดซ่อนแถบใน Safari ขณะเปิดเว็บแอพใน Homescreen
<meta name="apple-mobile-web-app-capable" content="yes">
source : apple
ไม่มีความคิดเห็น:
แสดงความคิดเห็น