IOS添加到主屏幕應用

Hybrid App

native app--原生app
web app--就是web應用,只能在瀏覽器進行查看,html,css,js
hybrid app--混合應用,指web端和native混合形成的app,這其實我們用Safari瀏覽器添加到主屏幕的應用app

Hybrid app可以理解為運行在安卓和ios上的終端應用,可以跨平台,渲染快,不會崩潰,沒有app審核,快速減少開發周期等

<meta name="apple-mobile-web-app-title" content="你的標題">  //定義了添加到主屏幕的快捷啟動頁名字
<meta name="apple-mobile-web-app-capable" content="yes">    //應用全屏展示
<meta name="apple-mobile-web-app-status-bar-style" content="black">  //apple-mobile-web-app-capable的前提下，設置狀態欄的屬性值apple-mobile-web-app-status-bar-style才有效  
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>  //viewport，width用於指定寬度，initial-scale指定初始化的縮略比例，minimum-scale指定縮小的比例，而maximum-scale則是放大的比例，當然這些縮放都取決於user-scalable——決定用戶是否能縮放頁面
<link rel="apple-touch-icon" href="/static/xxx.icon">  //定義了你添加到主屏幕的icon
<link rel="apple-touch-icon-precomposed" href='/static/xxx.icon"> //和上面一樣,區別就是有一層高光
<link rel="apple-touch-icon" href='/static/xxx.icon" sizes="57x57"> //sizes還可以圖標增加尺寸,當然要適配ipad,所以所有有四種,72x72,114x114,144x144

 

 

參考

https://www.jianshu.com/p/bb6606983424

 

 

版權聲明：本文原創發表於 博客園，作者為 RainBol 本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則視為侵權。