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

在ios中我们可以使用Safari浏览自带的将网页添加到主屏幕上,让我们的web页面看起来像一个本地应用程序一样,通过桌面APP图标一打开,直接全屏展示,就像在APP中效果一样,完全体会不到你是在浏览器中。

1.网站添加样式
在网站的html的head里面添加:(想添加启动动画的,可以看文章最后的启动图配置)

<head><meta charset="UTF-8"><!-- 自定义应用名称 --><meta name="application-name" content="百度一下"><!-- 自定义应用图标可用 --><link rel="apple-touch-icon-precomposed" sizes="120x120" href="https://g.csdnimg.cn/static/logo/favicon32.ico"><!-- 全屏设置 --><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"/><!-- 网站开启对 web app 程序的支持 具体表现为去除浏览器地址栏和底部导航栏 :先保存为桌面书签,然后通过书签打开即可生效--><meta name="apple-mobile-web-app-capable" content="yes"><!-- 用来定义顶部状态栏的形式默认是default为白色 black为黑色 black-translucent为灰色半透明(会占据屏幕的约20px,不同的设备可能会有差异)--><!-- 在定义了apple-mobile-web-app-capable的前提下,设置状态栏的属性值apple-mobile-web-app-status-bar-style才有效; --><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/><title>app名称</title>
</head>

2.添加到桌面图标
用safari打开网站,然后点击添加到桌面主屏幕
在这里插入图片描述

附加内容:配置app图标尺寸和启动图
这里会有一个app图标尺寸问题一般使用120*120,当然对于不同的设备会用不同的尺寸对应:下面是详细尺寸
在这里插入图片描述

APP图标显示配置:

  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- iPad and iPad mini (with @2× display) iOS ≥ 8 --><link rel="apple-touch-icon-precomposed" sizes="180x180" href="img/touch/apple-touch-icon-180x180-precomposed.png"><!-- iPad 3+ (with @2× display) iOS ≥ 7 --><link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/touch/apple-touch-icon-152x152-precomposed.png"><!-- iPad (with @2× display) iOS ≤ 6 --><link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png"><!-- iPhone (with @2× and @3 display) iOS ≥ 7 --><link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/touch/apple-touch-icon-120x120-precomposed.png"><!-- iPhone (with @2× display) iOS ≤ 6 --><link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png"><!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≥ 7 --><link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/touch/apple-touch-icon-76x76-precomposed.png"><!-- iPad mini and the first- and second-generation iPad (@1× display) on iOS ≤ 6 --><link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png"><!-- Android Stock Browser and non-Retina iPhone and iPod Touch --><link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png"><!-- Fallback for everything else --><link rel="shortcut icon" href="img/touch/apple-touch-icon.png"><!-- IOS 主屏幕应用全屏 --><meta name="apple-mobile-web-app-capable" content="yes"><!-- 安卓 主屏幕应用全屏 --><meta name="mobile-web-app-capable" content="yes">   

iPhone主流机型常见的不同设备尺寸

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/198202.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Oracle 查询语句限制只选择最前面几行,和最后面几行的实现方式。

查询最前面几行 在Oracle中&#xff0c;可以使用 ROWNUM 关键字来限制查询结果的行数。要选择前10条记录&#xff0c;可以使用以下查询语句&#xff1a; SELECT * FROM your_table WHERE ROWNUM < 10;实际查询时将your_table替换为要查询的表名。以上查询将返回表中的前10…

时间复杂度为 O(n^2) 的排序算法 | 京东物流技术团队

对于小规模数据&#xff0c;我们可以选用时间复杂度为 O(n2) 的排序算法。因为时间复杂度并不代表实际代码的执行时间&#xff0c;它省去了低阶、系数和常数&#xff0c;仅代表的增长趋势&#xff0c;所以在小规模数据情况下&#xff0c; O(n2) 的排序算法可能会比 O(nlogn) 的…

Stable Diffusion教程:4000字说清楚图生图

原文&#xff1a;Stable Diffusion教程&#xff1a;4000字说清楚图生图 - 知乎 目录 收起 基本使用 涂鸦绘制 局部绘制 局部绘制&#xff08;涂鸦蒙版&#xff09; 局部绘制&#xff08;上传蒙版&#xff09; 批量处理 总结 资源下载 “图生图”是 Stable Diffusion…

SSH:安全的远程登录和数据传输工具

SSH&#xff1a;安全的远程登录和数据传输工具 引言 在我们日常的网络操作中&#xff0c;经常需要远程控制服务器或者传输文件。如果你是一个系统管理员、开发者或者任何需要远程登录服务器的用户&#xff0c;那么SSH&#xff08;Secure Shell&#xff09;是你不可或缺的工具…

【Android知识笔记】架构专题(三)

如何用工程手段,提高写代码的生产力?(元编程) 即如何写同样多的代码,花费更少的时间?如何自动生成代码,哪种代码可以被自动生成?哪些环节能够作为自动生成代码的切入点? 代码自动生成技术 代码自动生成,指的并不是让计算机凭自己的意愿生成代码。而是让预先实现好…

三种定时任务总结

前言 springboot中设置定时任务有三种常见的方式&#xff0c;分别为&#xff1a; 基于Scheduled注解。基于Quartz框架。基于xxl-job框架。 下面将分别阐述下这三种方式的实现方式和优缺点。 1. Scheduled 介绍 Scheduled注解是Spring Framework提供的一个非常简单的创建定…

设计模式基础——工厂模式剖析(2/2)

目录 一、工厂模式 1.1 工厂模式的定义 1.2 工厂模式的设计意图 1.3 工厂模式主要解决的问题 1.4 工厂模式的缺点 1.5 实际的应用案例 1. 数据库连接池 2. 图形用户界面&#xff08;GUI&#xff09;组件 3. 文件操作 二、各种工厂模式的变形 1.1 简单工厂模式&#…

前端开启gzip优化页面加载速度

生成gizp的打包资源&#xff0c;可以优化页面加载速度 打包的时候开启gzip可以很大程度减少包的大小&#xff0c;页面大小可以变为原来的30%甚至更小,非常适合线上部署, 但还记得需要服务端支持 1、前端配置compression-webpack-plugin 先安装&#xff1a;npm install compres…

windows运行orb-slam3遇到的问题

windows版代码地址&#xff1a;https://github.com/melhashash/orbslam3-windows 编译完成&#xff0c;出现初始化不成功的现象。 问题一&#xff1a; 相机参数中没有相机类型&#xff0c;导致畸变参数初始化失败。 GrabImageRGBD中frame对象实例化时&#xff0c;缺少相机参数…

【Windows】永久屏蔽系统更新

永久关闭电脑更新服务 操作思路&#xff1a; 第一步 winR 输入 services.msc 回车 进入服务管理窗口第二步 进入窗口后 找到 w 开头的文件夹 并找到Windows Update 双击打开 Windows Update 将启动类型&#xff08;E&#xff09; 改为禁用 上方的 “常规” “登录” “恢…

EISeg 交互式分割标注软件安装

EISeg(Efficient Interactive Segmentation)是以RITM及EdgeFlow算法为基础&#xff0c;基于飞桨开发的一个高效智能的交互式分割标注软件。涵盖了通用、人像、遥感、医疗、工业质检等不同方向的高质量交互式分割模型&#xff0c;方便开发者快速实现语义及实例标签的标注&#x…

SNP推出新Glue软件Saas版本,助力云数据集成

最新Glue版本可作为软件即服务(SaaS)应用程序使用SAP数据和非SAP数据源之间的云原生集成大大简化了客户的企业数据集成SNP Glue通过应对AI和大数据计划中的关键挑战来增强云数据集成的价值 德国&#xff0c;海德堡 —— 2023年11月29日&#xff0c;作为SAP环境中数字化转型、自…

Vue学习笔记-<router-link>的replace的属性

router-link的replace属性 作用&#xff1a;控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式&#xff1a;push和replace&#xff0c;其中push是追加历史记录&#xff08;将浏览的url请求入栈&#xff09;&#xff0c;replace则是替换当前记录。路由跳…

第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式

文章目录 第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式将文字属性映射到 XML 模式IRIS 数据类型类的默认 XSD 类型 第二十五章 控制到 XML 模式的映射 - 将文字属性映射到 XML 模式 将文字属性映射到 XML 模式 本节讨论如何将文字&#xff08;非集合&#…

如何计算 ChatGPT 的 Tokens 数量?

一、基本介绍 随着人工智能大模型技术的迅速发展&#xff0c;一种创新的计费模式正在逐渐普及&#xff0c;即以“令牌”&#xff08;Token&#xff09;作为衡量使用成本的单位。那么&#xff0c;究竟什么是Token呢&#xff1f; Token 是一种将自然语言文本转化为计算机可以理…

容器重启后,Conda文件完整保存(虚拟环境、库包),如何重新安装conda并迁移之前的虚拟环境

Vim安装 容器重启后默认是vi&#xff0c;升级vim&#xff0c;执行命令 apt install -y vim安装 Anaconda 1. 下载Anaconda 其他版本请查看Anaconda官方库 wget https://mirrors.bfsu.edu.cn/anaconda/archive/Anaconda3-2023.03-1-Linux-x86_64.sh --no-check-certificate…

【DBeaver】驱动添加-Hive和星环

驱动 Hive驱动 hive驱动可以直接去官网下载官网地址&#xff0c;填一下个人信息。 如果想直接下载可以去我上次的资源下地址&#xff0c;需要用zip解压。 星环驱动 星环驱动是我第一次接触&#xff0c;是国产的基于开源Hive驱动自研的产品&#xff0c;我看到官网上有很多类…

[leetcode ~二叉树] 模版

文章目录 1. 左叶子之和2. 翻转二叉树 E 1. 左叶子之和 :::details 给定二叉树的根节点 root &#xff0c;返回所有左叶子之和。 示例 1&#xff1a; 输入: root [3,9,20,null,null,15,7] 输出: 24 解释: 在这个二叉树中&#xff0c;有两个左叶子&#xff0c;分别是 9 和 15&…

跨浏览器测试:如何确保你的应用在各种浏览器上都能正常运行

在当今的互联网时代&#xff0c;浏览器已成为我们获取信息、与他人交流、工作和娱乐的主要工具。然而&#xff0c;不同的浏览器、不同的版本和不同的操作系统可能会对你的应用造成不同的影响&#xff0c;可能使其表现出各种不同的行为和问题。为了确保你的应用能在各种浏览器环…

GaussDB数据库SQL系列-序列的使用

目录 一、前言 二、GaussDB数据库中的序列 1、语法(CREATE SEQUENCE) 2、注意事项 三、GaussDB数据库中的示例 1、示例一&#xff1a;创建普通序列 2、示例二&#xff1a;创建与表关联的序列 四、小结 一、前言 在数据库管理中&#xff0c;序列&#xff08;SEQUENCE&a…