ios-Safari保存H5网页到主屏幕-WapApp（H5全屏，自动旋转适配）

最新推荐文章于 2024-07-12 09:58:00 发布

fayechenlong

最新推荐文章于 2024-07-12 09:58:00 发布

阅读量4.6k

点赞数 1

本文链接：https://blog.csdn.net/fayechenlong/article/details/104673365

版权

本文介绍了如何使H5网页在iOS设备上通过保存到主屏幕，实现类似原生应用的体验。主要内容包括添加meta和link标签以设置WebApp样式、解决页面跳转后的“完成”按钮问题、处理屏幕旋转的适配，并提供相关文档链接供参考。

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

注：本文介绍H5网页在ios下可以通过保存到主屏幕的方式，让用户体验到类似原生应用的感觉，在ios难以过审的如今，这也不乏是一种退而求其次的方法。

一、在Head里增加meta与link标签

保存到桌面时将页面转成webApp的形式，不加的话还是会打开浏览器

<meta name="apple-mobile-web-app-capable” content=“yes” />

设置顶部的bar为黑色背景色

<meta name="apple-mobile-web-app-status-bar-style” content=“black”/>

设置保存到桌面的图标

<link rel="apple-touch-icon” sizes=“114x114” href=“./img/icon_ddw.png”/>

还可以设置打开的启动页图片

<link rel="apple-touch-startup-image" href="/launch.png"/>

单独设置app的title，如果不设会读取网页的title

<link rel&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

fayechenlong

关注关注

1
点赞
踩
8

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

uni-app -移动端H5小程序关闭当前页，返回上一页并调用上一页的方法

专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。

10-07

3623

在uni-app中，方法用于获取当前页面栈的实例数组。页面栈是指打开的页面的层级关系，当前页面在数组中的索引为，上一页在数组中的索引为，以此类推。方法返回的是一个页面栈数组，数组中的每个元素都是一个页面实例，包含了页面的数据和方法。通过获取页面栈数组，我们可以根据索引获取到上一页的实例，然后可以调用上一页的方法或访问上一页的数据。

uni-app -移动端 - 启动后全局横屏与单个页面横屏以及解决ios横屏失效

专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。

10-11

4399

最常见的横屏场景是视频播放应用。在竖屏模式下，用户通常只能看到视频的一部分，而在横屏模式下，用户可以利用更宽的屏幕空间来观看完整的视频内容。

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

苹果IOS在Safari浏览器中将网页添加到主屏幕做伪Web App，自定义图标，启动动画，自定义名称，全屏应用pwa

03-23

1万+

通过点击桌面上的图标，直接打开全屏页面:(这图标是我用CSDN的图标，嘻嘻，官方应该不介意吧)具体实现步骤一共三步：1.网站添加样式，2.添加到桌面图标，3.打开桌面图标。

html5游戏怎么保存,html5 保存文件

weixin_33556941的博客

05-31

896

利用浏览器做一个工具时，往往操作的对象就是文件本身，我们需要打开文件，然后对文件进行处理，最后，将处理后的数据，以文件的形式保存起来那么：我们怎么保存文件呢？以下提供两个方案：1 大家都不陌生，我们在浏览器上经常使用，单击一个链接，启动下载，如下：function createDownloadLink(dataUrl,fileName){var save_link = doc.createEle...

iOS Web 网站开发必备图标放大级别全屏等设置

万明博客

07-07

2万+

虽然没有能力开发Native App，但还是可以利用iOS中Safari浏览器的特性小小的折腾一下，做一个伪Web App满足下小小的虚荣心的。既然是在iOS中的Safari折腾的，那么代码中利用到的也基本上都是Safari的私有属性。添加图标到主屏幕是Web App的第一步： <link rel="apple-touch-icon-precomposed" sizes=

html5游戏怎么保存到本地,HTML5本地存储

weixin_30291121的博客

06-01

1383

在HTML5 WebStorage介绍了html5本地存储的Local Storage和Session Storage，这两个是以键值对存储的解决方案，存储少量数据结构很有用，但是对于大量结构化数据就无能为力了，灵活大不够强大。Web SQL Database我们经常在数据库中处理大量结构化数据，html5引入Web SQL Database概念，它使用 SQL 来操纵客户端数据库的 API，这些...

H5创建webApp保存到桌面。

CodingNoob

03-13

1万+

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

ios系统通过safari添加到主屏幕后，打开子链接还会跳转到safari

热门推荐

希望能找到你的答案

04-20

15万+

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

ios safari 描述文件跳转到_iOS-app跳转safari及从safari跳回app功能实现

weixin_32511509的博客

12-31

1989

app跳转safari可以用苹果系统方法openURL:来实现：[UIApplication sharedApplication] openURL:[NSURL URLWithSring:@"网址"]];safari跳回app要实现这个功能，必须要知道URL Schemes，那什么是URL Schemes？下面来简单的介绍一下：URL，我们都很清楚，https://www.baidu.com就是...

uniapp - 实现移动端H5微信公众号网页内置浏览器中预览和下载word文档(doc)、excel表格(xls)、ppt文稿、pdf文档等文件，微信内部打开预览和下载到本地详教程，兼容安卓苹果手机

王佳斌

07-12

7828

uni-app，微信公众号，h5，移动端，web平台端，网页，网站，Uniapp微信公众号H5网站，内置浏览器下载文档，如何在微信浏览器中预览office文件，word文档，excel文档，pdf文档，ppt文档，office，微信内置浏览器下载文件，下载文件，在微信浏览器里面实现下载任意文件，H5需要在微信浏览器中下载excel文件，UniApp实现网页在微信内置浏览器中下载文件详细教程，安卓点击下载会提示打开浏览器，后端返回流文件，如何解决无法下载文件，跳转至浏览器下载文件，发送到电脑微信，安卓，苹果，

ioswebapp.vue

10-25

ios safari 添加桌面提示页面介绍地址： https://blog.csdn.net/xjie_127/article/details/120956026

解决ios系统在safari浏览器中添加web应用程序到主屏幕，打开子链接会跳转到safari的问题

harmsworth的博客

07-05

5254

解决ios系统在safari浏览器中添加web应用程序到主屏幕，打开子链接会跳转到safari的问题前言 ios系统的safari浏览器有一个功能可以将web应用程序添加到主程序，使得web程序像app一样全屏显示操作。代码  <meta name="apple-mobil...

ios 缓存html5,在iOS中添加到主屏幕时,HTML5网络应用不缓存

weixin_30846347的博客

06-17

354

要清楚,Web应用程序是缓存,并在Mobile Safari中脱机工作.问题是当它被添加到iPhone 4s和iPad 2的主屏幕上,两者都运行iOS 6.0.1.它不会离线工作,并且连接到互联网时出现网络错误,即“无法打开MYWEBAPP.MYWEBAPP无法打开,因为它没有连接到互联网”我已经调试了好几个小时,似乎找不到解决方案.我没有在控制台收到任何错误,我正在运行Jonathan Star...

如何将自定义网站在iphone手机上"添加至主屏幕的图标"

sunshine的博客

02-07

1万+

在iphone手机上，网站可以添加到主屏幕，默认情况下，一个网站被添加到主屏幕时，默认显示的是网站截图，如何才能显示成我们自己想要设置的图标呢？我在实际工作中遇到了这个需求，将实现步骤总结如下： 1.制作4中不同尺寸的图片: link rel="apple-touch-icon-precomposed" sizes="144x144" href="./static/apple-tou

渐进式 Web 应用(PWA) 添加到主屏幕

qq_38469220的博客

02-02

826

PWA 的全称是 Progressive Web App，渐进式web应用。一个为响应式设计的“保护伞”式的术语，是 Google 在2015年提出，是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。往常的网页应用只要关闭了网页他的生命就结束了，现在引入了一个 Service Worker 的概念，即使网页关闭，PWA 仍然可以在后台运行获取数据更新（当然有限制）。web应用清单是一个 JSON 文件，其中包含有关应用的元数据，例如应用的名称、说明、图标及其使用的各种操作系统功能（

iOS iPadOS safari 独立Web应用屏幕旋转的时候 onresize window.innerHeight 数值不对。

学习笔记

07-02

1435

我有一个日记应用，是可以作为独立 Web 应用运行的那种，但在旋转屏幕的时候获取到的和就不对了，不是屏幕的正常尺寸。导致内容显示不正常。iPhone和 iPad 上都是这样的。本来应该是这样的。在旋转一次再转回来的时候就成了这样。

Laya H5横屏游戏输入法是竖屏，解决办法

waywaysoon的博客

03-21

549

H5这个问题肯定困扰了很多新手朋友，其中也包括我，但是社区的资料找完了，都没有把此问题做个总结。1.提示玩家把浏览器设置成横屏，然后在引擎中开启自动横屏，输入法就正常了。决定是否横竖屏，所以说其他H5引擎都有此问题。2.打包APP，以横屏运行。首先来说，输入法是。

safari浏览器横屏怎么设置_iPhone手机Safari浏览器不能不知道的四个小技巧

weixin_39834281的博客

12-19

5904

原标题：iPhone手机Safari浏览器不能不知道的四个小技巧如何自动开启阅读模式Safari 浏览器的“阅读视图”模式可以让页面更加纯粹，巧用该功能还能够实现屏蔽网页广告的效果。在 iOS 11 及以上系统中，Safari 可以对某一个网站设置自动开启阅读视图，也就是说只要你打开该网页后浏览器就会自动进入阅读模式，具体操作为：在网页中长按地址栏左侧的阅读视图按键，弹出菜单后选择在当前网站或者在...

iOS APP h5快捷程序 .mobileconfig的生成

灵壹Eli的博客

04-22

3820

想要确保您的所有家庭成员在其每台iOS设备上都有类似的应用和文档，管理日益增长的iOS设备库在我家中变得相当麻烦。尽管针对学校和企业，Apple Configurator是一款免费的macOS工具，可让您从中心位置管理贵组织（或家中）内的所有iOS设备。可移除：勾选则表示可以类似APP长按删除，否则只能在描述文件中删除。选择文件，给描述文件签名，就可以生成mobileconfig文件。名称：在手机设置–通用–描述文件与设备管理里面显示的名称。组织：在手机设置–通用–描述文件与设备管理里面显示的。

uni-app vue h5 复制到剪切板ios不生效问题