苹果端保存到桌面代码：（注意尺寸是57x57）
<p><pre class="prettyprint"> <code class=" hljs xml"> <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"viewport"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"apple-mobile-web-app-capable"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"yes"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"telephone=yes"</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"format-detection"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"apple-mobile-web-app-status-bar-style"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"white"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"x5-fullscreen"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"true"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">name</span>=<span class="hljs-value">"apple-touch-fullscreen"</span> <span class="hljs-attribute">content</span>=<span class="hljs-value">"yes"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"css/pc/index.css"</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"text/css"</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"stylesheet"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"apple-touch-icon"</span> <span class="hljs-attribute">sizes</span>=<span class="hljs-value">"57x57"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"img/logo-k.png"</span>/></span>
<span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"img/page-icon.png"</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"shortcut icon"</span>/></span></code></pre></p>
试了一下发现安卓端用浏览器打开保存到桌面后图标显示不了，(chrome和UC）都不行。但是看了哔哩哔哩网站上的可以。
安卓端于是多了一行代码：
<p><pre class="prettyprint"> <code class=" hljs xml"><span class="hljs-tag"><<span class="hljs-title">link</span> <span class="hljs-attribute">rel</span>=<span class="hljs-value">"manifest"</span> <span class="hljs-attribute">href</span>=<span class="hljs-value">"manifest.json"</span>></span></code></pre></p>
manifest.json文件内容如下（直接复制哔哩哔哩的）：
<p><pre class="prettyprint"> <code class=" hljs json">{
"<span class="hljs-attribute">name</span>": <span class="hljs-value"><span class="hljs-string">"哔哩哔哩web版"</span></span>,
"<span class="hljs-attribute">short_name</span>" :<span class="hljs-value"><span class="hljs-string">"bilibili"</span></span>,
"<span class="hljs-attribute">start_url</span>": <span class="hljs-value"><span class="hljs-string">"index.html"</span></span>,
"<span class="hljs-attribute">display</span>": <span class="hljs-value"><span class="hljs-string">"standalone"</span></span>,
"<span class="hljs-attribute">orientation</span>": <span class="hljs-value"><span class="hljs-string">"portrait"</span></span>,
"<span class="hljs-attribute">theme_color</span>": <span class="hljs-value"><span class="hljs-string">"#de698c"</span></span>,
"<span class="hljs-attribute">background_color</span>": <span class="hljs-value"><span class="hljs-string">"#fff"</span></span>,
"<span class="hljs-attribute">icons</span>": <span class="hljs-value">[{
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//s1.hdslb.com/bfs/static/mult/images/app_logo.png@36w_36h.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"36x36"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//s1.hdslb.com/bfs/static/mult/images/app_logo.png@48w_48h.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"48x48"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//s1.hdslb.com/bfs/static/mult/images/app_logo.png@72w_72h.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"72x72"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//s1.hdslb.com/bfs/static/mult/images/app_logo.png@96w_96h.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"96x96"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//static.hdslb.com/mobile/img/512.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"144x144"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//static.hdslb.com/mobile/img/512.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"192x192"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//static.hdslb.com/mobile/img/512.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"256x256"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}, {
"<span class="hljs-attribute">src</span>": <span class="hljs-value"><span class="hljs-string">"//static.hdslb.com/mobile/img/512.png"</span></span>,
"<span class="hljs-attribute">sizes</span>": <span class="hljs-value"><span class="hljs-string">"512x512"</span></span>,
"<span class="hljs-attribute">type</span>": <span class="hljs-value"><span class="hljs-string">"image/png"</span>
</span>}]</span>,
"<span class="hljs-attribute">permissions</span>": <span class="hljs-value">{
"<span class="hljs-attribute">desktop-notification</span>": <span class="hljs-value">{
"<span class="hljs-attribute">description</span>": <span class="hljs-value"><span class="hljs-string">"Needed for creating system notifications."</span>
</span>}
</span>}
</span>}</code></pre></p>
看了一下他们需要适应不同的手机屏幕，所以就有不同的尺寸。
查看看下Mozilla 的web开发文档Manifest文件的解释如下：
于是安卓端也可以保存到桌面webApp了（chrome和UC可以，其他的没去一一试。）
刚离职，心有点乱，一直在努力着，希望可以尽快找到合适自己的工作。 |
|
