移动端web页面一键保存到桌面

一、head添加meta和link

<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="./img/icon.png" >

1. meta添加name="apple-mobile-web-app-capable"一键添加到桌面的wenApp打开页面是全屏的并content="yes"设置。
2. link标签href添加icon图片链接，保存桌面的webApp图标设置

二、js一键保存桌面的弹框显示范围设置

 // window.navigator.userAgent ，用来区分设备和浏览器；
 var u = window.navigator.userAgent;
 if (u.toLowerCase().match(/MicroMessenger/i) == "micromessenger") {
   //微信浏览器是否显示，这里不显示
   return
 } else {
   if(u.indexOf('iPhone') !== -1 || u.indexOf('iPad') !== -1){
     //iPhone手机和iPad手机显示
     if(u.indexOf("Safari")!==-1){
       //Safari浏览器显示弹框提示用户一键保存到桌面//
       var dom= document.getElementById('tips');//
       dom.style.display='block'
     }else {
       return
     }
   }
 }

是否为webApp的判断window.navigator.standalone

 if(window.navigator.standalone==true){
   //为WebApp
   }else {
   //浏览器页面
   }

好了快去试试吧

您在本文章已经停留了大概 。
喜欢的话就点个赞吧！或着请我喝个冰可乐，我就太感谢你了！