《Disney +》 迪士尼、Marvel、彼思、星球大戰…  九月份PlayStation Plus遊戲:《Overcooked: All You Can Eat!》《Hitman 2》、《Predator: Hunting Grounds》   「瓦干達之戰」中黑豹服裝背後的靈感   Razer推出手機玩家專用產品 電競指套「Razer Gaming Finger Sleeve」   加入我們尋找彩蛋   雪山密室逃脱 x 狼人殺《Project Winter》現已登陸 PS4/Switch!   熱門優惠活動襲捲PlayStation Store   《虹彩六號:圍攻行動》最新賽季「腥紅劫案」即日推出   PlayStation 5推出一週年 

iPhone、iPad Safari 的 ICON 尺寸 與 主畫面連結增加方式

科技

iPhone、iPad 可以將網站的 ICON 快速加入主畫面(桌面), 點選圖示就跟開 App 一樣, 只是會用 瀏覽器(Safari) 開啟而已.

但是要快速加入 主畫面, 網站有提供相對應的圖示(ICON)的話, 加入 主畫面 後才會比較好辨認(沒 ICON 的話, Safari 會做網站縮圖).

iPhone、iPad Safari 的 ICON 尺寸 與 主畫面連結增加方式

網路很多文章都有寫 ICON 需要的圖示, 但是尺寸似乎都不太一樣, 建議參考官方說明, 以官方的為主吧~

官方(2013年, iPhone4S、iPhone5、iPad...)目前的 ICON 尺寸需要此四種尺寸: 60x60, 76x76, 120x120, 152x152, 於 HTML META Tag 寫法如下述:

  • 下述取自此篇: Safari Web Content Guide: Configuring Web Applications

    View Raw Code?

    1. <link rel="apple-touch-icon" href="touch-icon-iphone.png" />

    2. <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />

    3. <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />

    4. <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />

    5. The icon that is the most appropriate size for the device is used. If no sizes attribute is set, the element’s size defaults to 60 x 60.

  1. iPhone: 60x60
  2. iPad: 76x76
  3. iPhone Retina: 120x120
  4. iPad Retina: 152x152

將 網站 加入 iPhone、iPad 主畫面 連結顯示的方式

製作完成後, 可以馬上於 iPhone 的 Safari 測試看看加入的效果, 下述以 "飛比價格手機版" 為例(iOS7), 步驟如下:

  1. 用 Safari 開啟網頁, 於下方選單中間按鈕為"分享"按鈕, 點此"分享"按鈕.
  2. 點選 "加入主畫面"
  3. 設定預設加入的圖示和內容
  4. 完成, 主畫面(桌面)上就有 ICON 囉~

圖片步驟可見下圖:
ios7-mobile-flow-2013

轉載來源

隨機科技新聞

NordVPN