IOS 通過介面表徵圖啟動Web應用 + 全屏應用 + 添加到主畫面

來源:互聯網
上載者:User

標籤:content   bsp   gen   表徵圖   blog   master   roi   web應用   pod   

在 iPhone「添加到主畫面」時顯示自訂表徵圖

測試資源下載:https://github.com/dragon8github/mobile-boilerplate/tree/master/img/touch

<!doctype html><html>  <head>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">        <!-- iPad and iPad mini (with @2× display) iOS ≥ 8 -->        <link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png">        <!-- iPad 3+ (with @2× display) iOS ≥ 7 -->        <link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png">        <!-- iPad (with @2× display) iOS ≤ 6 -->        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">        <!-- iPhone (with @2× and @3 display) iOS ≥ 7 -->        <link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png">        <!-- iPhone (with @2× display) iOS ≤ 6 -->        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">        <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 -->        <link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png">        <!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 -->        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">        <!-- Android Stock Browser and non-Retina iPhone and iPod Touch -->        <link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">        <!-- Fallback for everything else -->        <link rel="shortcut icon" href="img/touch/apple-touch-icon.png">                <!-- IOS 主畫面應用全屏 -->        <meta name="apple-mobile-web-app-capable" content="yes">        <!-- 安卓 主畫面應用全屏 -->        <meta name="mobile-web-app-capable" content="yes">     

      <!-- IOS默認的時間、電池、供應商等資訊 -->
      <meta name="apple-mobile-web-app-status-bar-style" content="black" />


</head> <body> </body></html>

 

效果示範(Safari瀏覽器才支援【添加到主畫面】,坑爹的UC瀏覽器不支援):

在案頭顯示的是自訂的ICO表徵圖

 由於加入了<meta name="apple-mobile-web-app-capable" content="yes">

 所以通過案頭啟動的網站是全螢幕顯示的(隱藏了瀏覽器的地址欄和工具列,載入狀態列等)

 

IOS 通過介面表徵圖啟動Web應用 + 全屏應用 + 添加到主畫面

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.