html5教程-H5创建webApp保存到桌面（代码教程）

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

苹果 端保存到桌面代码：（注意 尺寸 是57x57）

     < ;m eta n am e="viewport" content="width=device-width, in IT ial -s cale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>     <meta name="apple- mobile -web-app-capable" content="yes"/>     <meta content="telephone=yes" name="format- detect ion"/>     <meta name="apple-mobile-web-app- stat us-bar-style" content="white"/>     <meta name="x5-fullscreen" content="true"/>     <meta name="apple -t ouch-fullscreen" content="yes"/>     <link  hr ef="css/pc/index.css" ty PE ="text/css" rel="stylesheet"/>     <link rel="apple-touch -i con" sizes="57x57" href=" img / LOG o-k.png"/>     <link href="img/page-icon.png" rel="shortcut icon"/>

试了一下发现 安卓 端用浏览器打开保存到桌面后图标显示不了，(ch rom e和UC）都不行。但是看了哔哩哔哩网站上的可以。

安卓端于是多了一行代码：

 <link rel="manifest" href="manifest.json">

manifest. json文件 内容如下（直接复制哔哩哔哩的）：

 {   "name": "哔哩哔哩web版",   "short_name" :"bilibili",   "start_url": "index.ht ML ",   "dis play ": "standalone",   " orientation ": "portr ai t",   "theme_color": " # de698c",   "background_color": "#fff",   "icons": [{     "src": "//s1.hdslb .COM /bfs/static/mult/images/app_logo.png@36w_36h.png",     "sizes": "36x36",     "type": "image/png"   }, {     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@48w_48h.png",     "sizes": "48x48",     "type": "image/png"   }, {     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@72w_72h.png",     "sizes": "72x72",     "type": "image/png"   }, {     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@96w_96h.png",     "sizes": "96x96",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/ 512 .png",     "sizes": "144x144",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "192x192",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "256x256",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "512x512",     "type": "image/png"   }],   "permissions": {     "desktop-notification": {       "description": "Needed for creating  Sys tem notifications."     }   } }

看了一下他们需要适应不同的手机屏幕，所以就有不同的尺寸。

苹果端保存到桌面代码：（注意尺寸是57x57）

     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>     <meta name="apple-mobile-web-app-capable" content="yes"/>     <meta content="telephone=yes" name="format-detection"/>     <meta name="apple-mobile-web-app-status-bar-style" content="white"/>     <meta name="x5-fullscreen" content="true"/>     <meta name="apple-touch-fullscreen" content="yes"/>     <link href="css/pc/index.css" type="text/css" rel="stylesheet"/>     <link rel="apple-touch-icon" sizes="57x57" href="img/logo-k.png"/>     <link href="img/page-icon.png" rel="shortcut icon"/>

试了一下发现安卓端用浏览器打开保存到桌面后图标显示不了，(chrome和UC）都不行。但是看了哔哩哔哩网站上的可以。

安卓端于是多了一行代码：

 <link rel="manifest" href="manifest.json">

manifest.json文件内容如下（直接复制哔哩哔哩的）：

 {   "name": "哔哩哔哩web版",   "short_name" :"bilibili",   "start_url": "index.html",   "display": "standalone",   "orientation": "portrait",   "theme_color": "#de698c",   "background_color": "#fff",   "icons": [{     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@36w_36h.png",     "sizes": "36x36",     "type": "image/png"   }, {     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@48w_48h.png",     "sizes": "48x48",     "type": "image/png"   }, {     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@72w_72h.png",     "sizes": "72x72",     "type": "image/png"   }, {     "src": "//s1.hdslb.com/bfs/static/mult/images/app_logo.png@96w_96h.png",     "sizes": "96x96",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "144x144",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "192x192",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "256x256",     "type": "image/png"   }, {     "src": "//static.hdslb.com/mobile/img/512.png",     "sizes": "512x512",     "type": "image/png"   }],   "permissions": {     "desktop-notification": {       "description": "Needed for creating system notifications."     }   } }

看了一下他们需要适应不同的手机屏幕，所以就有不同的尺寸。

觉得 可用，就经常来吧！ 欢迎评论哦！&nbs p; html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！

总结

以上是 为你收集整理的 html5教程-H5创建webApp保存到桌面（代码教程） 全部内容，希望文章能够帮你解决 html5教程-H5创建webApp保存到桌面（代码教程） 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于html5教程-H5创建webApp保存到桌面（代码教程）的详细内容...