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

最新推荐文章于 2025-04-16 09:32:39 发布

Delia郭

最新推荐文章于 2025-04-16 09:32:39 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签：移动端页面一键保存到桌面区别webApp和浏览器页面不同设备不同浏览器判断

本文链接：https://blog.youkuaiyun.com/Guo_XiaoJia/article/details/94126801

笔记专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在移动端页面中实现一键保存到桌面的功能。通过在<head>中添加meta和link标签，设置webApp全屏及图标。同时，利用js进行设备和浏览器类型的判断，特别是window.navigator.standalone属性用于检测是否为webApp，从而调整弹框显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一， 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一键保存桌面的弹框显示范围设置

 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
                }
            }
        }

window.navigator.userAgent ，用来区分设备和浏览器；

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

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