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

最新推荐文章于 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

分享到新浪微博

扫一扫

专栏目录

电信设备-基于移动端的一键语音导航的系统和方法.zip

09-18

本篇资料主要聚焦于“电信设备-基于移动端的一键语音导航的系统和方法”，我们将深入探讨这个主题，了解其背后的原理、实现方式以及实际应用。首先，我们要明白，一键语音导航系统的核心是语音识别技术。这种技术...

检测iOS Web应用程序是否运行在全屏模式

isoft8

03-08

1281

iOS上的Safari浏览器可以让Web应用程序全屏显示，以取得类似本地应用的显示效果。但是这需要用户把Web应用程序的图标添加到主屏幕才可以。作为开发者，为了更好的显示效果，我们可能希望自己开发的Web应用程序在非全屏状态下运行时提示用户把Web应用程序的图标添加到主屏幕。要检测Web应用程序当前是否运行在全屏状态，只要检测window.navigator.standalone是否为tr

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

判断web app是否从主屏启动

weixin_30415801的博客

03-26

277

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

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

最新发布

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

08-05

584

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

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

菜菜的博客

01-09

4413

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

复制链接到safari浏览器打开_ios系统通过safari添加到主屏幕后，打开子链接还会跳转到safari...

weixin_39712455的博客

02-05

3438

我们做好了一个web的应用程序，有时候演示，需要在手机浏览器中操作，每次都需要打开手机浏览器，然后找到地址进行访问，这不算什么，最讨厌的就是还有手机浏览器自带的工具栏等，看着不舒服。ios系统的safari有个功能：添加到主屏幕，就会在系统桌面创建一个程序图标，这样每次只要点击图标就能打开系统，也能做到如app系统那样全屏显示、操作。但是有个问题，主页是可以全屏显示，点击子链接就会跳转到safar...

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

weixin_29531989的博客

02-08

276

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

手机移动端图片相册展示页面模板

07-12

3. **触摸交互**：考虑到移动端主要通过触摸操作，模板应支持滑动切换图片、捏合缩放等手势，增强用户交互性。使用Hammer.js或其他类似的库可以方便地实现这些功能。 4. **性能优化**：减少HTTP请求次数、合并CSS和...

58同城移动端页面.zip

04-20

7. Accessibility（无障碍访问）：考虑到各种用户需求，58同城移动端页面应该遵循WCAG（Web Content Accessibility Guidelines）标准，确保视觉障碍或其他障碍的用户也能方便地使用服务。综上所述，58同城移动端...

手机移动端幼儿园在线报名预约页面模板

07-12

总的来说，手机移动端幼儿园在线报名预约页面模板的设计与开发涉及到前端开发技术、用户体验设计、数据安全和网络优化等多个领域，是现代教育信息化不可或缺的一部分。在实际应用中，不断优化和完善这些页面，将有助...

js阻止移动端页面滚动的两种方法

10-20

本文将详细介绍两种JavaScript方法来阻止移动端页面的滚动。 ### 方法一：通过监听`touchmove`事件在JavaScript中，我们可以监听`touchmove`事件，然后阻止其默认行为，从而实现页面滚动的禁用。这种方法的核心是...

geolocation

03-08

geolocation，电脑手机都可以。

手机前端开发注意事项

herion_liu的博客

06-15

765

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

HTML5实战与剖析之是否从主屏幕图标进入的网站

梦龙小站

01-16

2452

手机端的IOS系统中的safari浏览器可以把Webapp作为图标存在本地方便用户进行查看。那么我们怎么用户是否从主屏幕图标进入的网站呢?下面将为大家慢慢介绍。

怎样判断是安卓webapp和ios webapp？怎样判断网页是否添加到主屏幕

小码的博客

01-28

1200

在pwa中介绍过，目前安卓和ios的浏览器都支持将网页添加到主屏幕或者桌面快捷方式，即为webapp。公司要求没有添加主屏幕的给弹框提示添加主屏幕。所以需要判断网页是否添加到主屏幕。添加到主屏幕的页面有什么不同呢？如何判断web应用是否从桌面图标启动这就要说到web应用添加到桌面后的显示模式了，一共有这么多种，通过mainfest来控制。只要知道启动模式是什么，就能判断出是否从桌面启动。 fullscreen: 全屏显示, 所有可用的显示区域都被使用, 并且不显示状态栏chrome stand

如何识别网页是否在 PWA 环境下运行？从而判断是否展示内容

05-06

1545

想要判断是不是在PWA中打开的网站，该怎么做？终于在Stack Overflow找到了答案。当不是在pwa中打开的话：网页内容展示。

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