GlareVPN使用日本在地伺服器‧日本本地IP位址,述不能訪問日本國內網站的情形將通通消失。  歡迎來到《Knockout City》——世界躲避球大亂鬥之都   Nintendo Switch版《國夫君的三國志全員集合!》發售日終於確定!   澀谷實境RPG!《新‧美麗新世界》×「FIELD WALK RPG」街道探索活動開跑!   比Xbox One更小更厲害!終於入手超小&最輕的次世代主機「Xbox Series S」馬上開箱!   帥氣×萌!Razer與「HELLO KITTY AND FRIENDS」聯名周邊登場!   Wellplayed Rizest 的控股公司 Kayac 宣布將投資東南亞具代表性的電競公司「Tier One Entertainment」並與之合作。   TETRIS王者盃又來了!這次是「魔物獵人崛起 合作祭!」   「PS VR亮點」今日回歸 

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