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

最新推荐文章于 2024-08-05 17:19:49 发布

Delia郭

最新推荐文章于 2024-08-05 17:19:49 发布

阅读量2.6k

点赞数

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

本文链接：https://blog.csdn.net/Guo_XiaoJia/article/details/94126801

版权

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

摘要由CSDN通过智能技术生成

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

一， 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图标设置

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Delia郭

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

JavaScript为iphone添加到主屏幕

anyuma8815的博客

11-25

1783

iphone手机有一个书签栏上可以将当前在浏览的网页添加到主屏幕，用户添加该选项之后，就可以从桌面上启动这个web程序，让人看起来有点像web app一样，深受许多人的喜爱。但是很多人却不知道或者懒得去设置，本文将介绍一个JavaScript提示用户添加到主屏幕。设定主屏幕图标 iOS 的网页图标与传统的网页 favicon 相似, 处理方式也差不多, 下面会为你介绍几种处理方...

html保存到桌面的代码,H5创建webApp保存到桌面（代码教程）

weixin_35034536的博客

06-02

1297

苹果端保存到桌面代码：(注意尺寸是57x57)试了一下发现安卓端用浏览器打开保存到桌面后图标显示不了，(chrome和UC)都不行。但是看了哔哩哔哩网站上的可以。安卓端于是多了一行代码：manifest.json文件内容如下(直接复制哔哩哔哩的)：{"name": "哔哩哔哩web版","short_name" :"bilibili","start_url": "index.html","disp...

参与评论您还未登录，请先登录后发表或查看评论

完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码

现实与爱的博客

07-26

1万+

设为首页,加入收藏,保存桌面

判断用户是否在pwa环境中打开运行？（已安装的 PWA 与未安装的 PWA 网站之间有什么区别？）以及pwa安装成功/失败的回调

最新发布

技术前端，忠于热爱 @回忆哆啦没有A梦

08-05

565

判断用户是否在pwa环境中打开运行？（已安装的 PWA 与未安装的 PWA 网站之间有什么区别？）以及pwa安装成功/失败的回调

mysql怎么生成快捷方式_php生成网页桌面快捷方式

weixin_29531989的博客

02-08

274

本文将介绍使用PHP生成网页桌面快捷方式的代码，并添加图标及解决不同浏览器保存出现的乱码问题。我们访问网站时，如果网站的内容很有吸引，一般我们都会使用浏览器的收藏夹功能，收藏此网站。在浏览器收藏的网页，需要打开浏览器，再从收藏夹选定访问。如果可以在桌面直接进入到网站，这样可以为用户访问提供便利。我们可以使用php创建网页的快捷入口文件，保存到用户桌面，方便用户快速访问。生成代码如下：$filena...

JS实现浏览器：加入收藏、设为首页、保存到桌面的方法功能

web前端开发

07-24

2752

来源 |http://www.fly63.com/article/detial/785在一些网页中我们可以常见的“设置为首页”和“ 收藏本站”，以及“保存到桌面”等功能，使用js是如何...

保存网页时“丢三落四”？8k Star 的开源扩展，一键完美保存完整网页

osfront的博客

04-07

1248

【导语】：用浏览器自带的网页另存功能时，经常出现丢失图片，而且还会保存一堆的关联文件。最近 GitHub 上有一个热门开源工具，可以完美解决这些问题。简介 SingleFile 是一个浏览器扩展，以及 CLI 工具，可快速将完整的网页保存成单一 HTML 文件。它兼容 Chrome、Firefox（桌面和移动端）、Edge、Vivaldi、Brave、Waterfox、Yandex 和 Opera 等主流浏览器。项目地址： https://github.com/gildas-lormeau/Sing

xx文库下载器v3.4 一键傻瓜式操作.zip

08-30

除了基本的下载功能，该软件还可能具备其他辅助特性，如批量下载、支持多种格式、保存到云盘等。例如，用户可以通过批量导入URL列表，一次性下载多个文档，提高效率。同时，将文件存储到云盘，可以实现多设备同步，...

如何实现MetaMask签名授权后DAPP一键登录功能？

HiBlock的博客

11-14

3327

1 摘要网站太多，各种用户名/密码实在记不住。所以我们逐渐接受了BAT账号的授权登录功能。在以太坊DAPP应用中，也可以使用MetaMask实现授权后一键登录功能。MetaMask是去中心化钱包，授权信息不会如BAT中心一样存在被收集利用的问题。本文从技术层面讲清楚原理，并结合代码说明如何实现。 2 授权一键式登录的利弊分析我们往往被自己的密码难住，越来越抵制传统的电子邮件/密码注册流程。...

JS in CSS：一键支持响应式布局

xiaodongbi的博客

11-15

212

如今网速不再成为适配移动端时选择响应式设计的限制因素，在资源充足的条件下，针对各端各自设计应用界面能达到应用最佳用户体验，毕竟不同类型的设备交互体验是不同的，但在团队前端资源拮据时，相比无脑自适应，响应式设计自然是最为经济适用的。媒体查询，弹性布局和相对布局的综合运用构成了响应式设计的三板斧，iofod 利用 JS in CSS 把它们应用范围从 Web 拓展到全平台，于此同时向后兼容新响应式设计。

geolocation

03-08

geolocation，电脑手机都可以。

android浏览器有桌面模式么,手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式...

weixin_31240035的博客

05-30

1380

手机浏览器添加到主屏幕(桌面)的图标设置以及WebApp模式作者：unclealan•2017年05月12日http://www.unclealan.cn/index.php/front/73.html在手机浏览器上打开某个网站的时候，菜单中有这么一个选项"添加到主屏幕"，当然不同的手机改菜单选项的名字有所不同基本上叫"添加到桌面"、"添加到桌面导航" 之类的，请自行理解其中意思。这样，主屏...

判断web app是否从主屏启动

weixin_30415801的博客

03-26

274

window.navigator.standalone 可用于判断当前web app是否从主屏启动。注意，这只在ios设备有效。转载于:https://www.cnblogs.com/cly84920/archive/2012/03/26/4426537.html

【IOS的safari浏览器】uniapp的H5项目 safari＜添加到主屏幕＞功能的实现（多页面、单页面）

菜菜的博客

01-09

4394

添加到主屏幕功能的实现、Uniapp的H5项目

手机前端开发注意事项

herion_liu的博客

06-15

765

1、首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用 //强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览； //iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览； //iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；

javaScript将网页放到桌面，发送快捷方式到桌面

程宇寒

05-03

1万+

不废话了，直接上代码，代码中有注释，有解释说明！说明下：ActiveXObject只支持IE浏览器，所以放到桌面这个功能只支持IE浏览器,不支持火狐浏览器、谷歌浏览器等！<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html ...

倾力总结40条常见的移动端Web页面问题解决方案

weixin_34109408的博客

05-30

3305

原文链接：http://mp.weixin.qq.com/s?__biz=MzAwNjI5MTYyMw==&mid=2651493053&idx=1&sn=8409bc267cd73229425a915f27f6a27f&scene=0#wechat_redirect 1.安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很...

每天一剂 WebView 良药