脚本宝典收集整理的这篇文章主要介绍了html5教程-H5创建webApp保存到桌面（代码教程），脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

     <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"/>

 <link rel="manifest" href="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."     }   } }

苹果端保存到桌面代码：（注意尺寸是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."     }   } }

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

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

脚本宝典总结

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

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。