当前位置： 首页 > news >正文

iphone的safari浏览器实现全屏的pwa模式，并修改顶部状态栏背景颜色

news 文章来源：https://blog.csdn.net/weixin_44786530/article/details/133122339 2025/2/8 23:02:45

要想修改顶部背景颜色，需要用到这个属性：content就是你要设置的颜色

    <!-- 状态栏的背景色 --><meta name="theme-color" content="#f8f8f8" />

然后再加上下面的设置：

    <!-- 网站开启对 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="default" /><meta name="application-name" content="web独立页面的名称" />

总的设置：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><!-- 网站开启对 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="default" /><meta name="application-name" content="web独立页面的名称" /><!-- 放在桌面上的图标 --><link rel="apple-touch-icon-precomposed" sizes="120x120" href="icon.png" /><!-- 状态栏的背景色 --><meta name="theme-color" content="#fc5531" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><title>收入明细</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>

 如果没有设置状态栏背景颜色，可能看到的效果：背景是黑色或者白色

 

配置好状态栏颜色后：

相关文章：

iphone的safari浏览器实现全屏的pwa模式，并修改顶部状态栏背景颜色

要想修改顶部背景颜色&#xff0c;需要用到这个属性&#xff1a;content就是你要设置的颜色 <!-- 状态栏的背景色 --><meta name"theme-color" content"#f8f8f8" /> 然后再加上下面的设置&#xff1a; <!-- 网站开启对 web app 程序的支持…...

编程日记 2023/9/25 4:27:04

springboot对接rabbitmq并且实现动态创建队列和消费

背景 1、对接多个节点上的MQ&#xff08;如master-MQ&#xff0c;slave-MQ&#xff09;&#xff0c;若读者需要自己模拟出两个MQ&#xff0c;可以部署多个VM然后参考 docker 安装rabbitmq_Steven-Russell的博客-CSDN博客 2、队列名称不是固定的&#xff0c;需要接受外部参数&…...

编程日记 2023/9/25 4:26:03

Spring的后处理器-BeanFactoryPostprocessor

目录 Spring后处理器 Bean工厂后处理器-BeanFactoryPostProcessor 修改beanDefinition对象 添加beanDefiniton对象 方法一 方法二 自定义Component Spring后处理器 Spring后处理器是Spring对外开放的重要拓展点&#xff08;让我们可以用添加自己的逻辑&#xff09;&…...

编程日记 2023/9/25 4:21:59

Flutter 必备知识点

Flutter 升级 确保在项目根目录下&#xff08;含有 pubspec.yaml 的文件夹&#xff09; 在命令行中输入命令&#xff1a; flutter channel输出&#xff1a; Flutter channels: * mastermainbetastable这个可以在 pubspec.yaml 中查看&#xff1a; 切换分支也很简单&#xf…...

编程日记 2023/9/25 4:20:58

什么是FMEA（失效模式和影响分析）？

失效模式和影响分析&#xff08;FMEA&#xff09;是一个在开发阶段&#xff0c;用于确定产品或流程可能的风险和失败点的有条理的过程。FMEA团队会研究失效模式&#xff0c;也就是产品或流程中可能出错的地方&#xff0c;以及这些失效可能带来的影响&#xff08;如风险、损害、…...

编程日记 2023/9/25 4:19:57

Redis面试题(三)

文章目录 前言一、怎么理解 Redis 事务&#xff1f;二、Redis 事务相关的命令有哪几个&#xff1f;三、Redis key 的过期时间和永久有效分别怎么设置&#xff1f;四、Redis 如何做内存优化&#xff1f;五、Redis 回收进程如何工作的&#xff1f;六、 加锁机制总结 前言 怎么理…...

编程日记 2023/9/25 4:17:55

Python错误处理指南：优雅应对异常情况

目录 一. 异常是什么&#xff1f;二. 使用 try 和 except三. 捕获多个异常四. 使用 else五. 使用 finally六. 自定义异常七.Python中常见异常处理类型八.Python中常见异常处理实例九.异常处理最佳实践十.结论 当编写Python代码时&#xff0c;错误处理是一个重要的方面&#xff…...

编程日记 2023/9/25 4:15:54

MySQL学习笔记12

MySQL 查询语句&#xff1a; 1、查询五子句&#xff1a;&#xff08;重点&#xff09; mysql> select */字段列表 from 数据表名称 where 子句 group by 子句 having 子句 order by 子句 limit 子句; 1&#xff09;where 子句&#xff1b;条件筛选。 2&#xff09;group…...

编程日记 2023/9/25 4:14:52

【owt】构建m79的owt-client-native：使用vs2017

家里电脑换成了台式机，拷贝代码发现了三年前的owt客户端mfc工程。 不用下载第三方库，试着构建下： owt-client-native 我这里有3年前的代码，思索了下还是用vs2017构建吧： 重新构建一下 选用x86 的 vs2017 vs的命令行控制台 cls可以清理屏幕 之前构建过vs2022的webrtc原版 …...

编程日记 2023/9/25 4:12:51

Cpp/Qt-day020918Qt

目录 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两…...

编程日记 2023/9/25 4:11:50

Spring面试题10：Spring的XMLBeanFactory怎么使用

该文章专注于面试，面试只要回答关键点即可，不需要对框架有非常深入的回答，如果你想应付面试，是足够了，抓住关键点 面试官：Spring的XMLBeanFactory怎么使用 XmlBeanFactory是Spring框架中的一个实现类，它是BeanFactory接口的一个具体实现。XmlBeanFactory的主要作用是通…...

编程日记 2023/9/25 4:09:48

自定义数据类型

前言&#xff1a;小伙伴们又见面啦&#xff0c;今天这篇文章&#xff0c;我们来谈谈几种自定义数据类型。 目录 一.都有哪些自定义数据类型 二.结构体 结构体内存对齐 1.如何对齐 2.为什么要对齐 3.节省空间和提升效率的方法 &#xff08;1&#xff09;让占用空间小的成员…...

编程日记 2023/9/25 4:07:45

产品团队的需求验证和确认

需求核实过程是确保软件满足特定的规格要求&#xff0c;而验证则侧重于软件是否达到了最终用户的期望和需求。 如果你正在开发一种医疗产品&#xff0c;这种区别也可能在法规和标准中有所体现&#xff0c;例如&#xff1a; 820.30(f)&#xff1a;设计验证应确认设计的成果符合…...

编程日记 2023/9/25 4:05:43

【JVM】类加载的过程

文章目录 类的生命周期加载验证准备解析初始化简要概括 类的生命周期 一个类型从被加载到虚拟机内存中开始&#xff0c;到卸载出内存为止&#xff0c;它的整个生命周期将会经历加载 &#xff08;Loading&#xff09;、验证&#xff08;Verification&#xff09;、准备&#xf…...

编程日记 2023/9/25 4:00:38

Golang 结构化日志包 log/slog 详解（四）：分组、上下文和属性值类型

上一篇文章讲解了 log/slog 包中的自定义日志属性字段和日志级别&#xff0c;本文讲解下分组、上下文和属性值类型 分组输出 slog 支持将字段放在组中并且可以给分组指定名称。如何展示分组的内容&#xff0c;取决于使用的 handler&#xff0c;例如 TextHandler 使用点号分隔…...

编程日记 2023/9/25 3:59:37

小白学Python：提取Word中的所有图片，只需要1行代码

#python# 大家好&#xff0c;这里是程序员晚枫&#xff0c;全网同名。 最近在小破站账号&#xff1a;Python自动化办公社区更新一套课程&#xff1a;给小白的《50讲Python自动化办公》 在课程群里&#xff0c;看到学员自己开发了一个功能&#xff1a;从word里提取图片。这个…...

编程日记 2023/9/25 3:58:36

pip修改位于用户目录下的缓存目录

默认 pip 缓存目录&#xff1a; Windows: C:\Users\${用户名}\AppData\Local\pip\cache Linux: ~/.cache/pip 一、修改方式 1.命令方式 pip config set global.cache-dir "D:\kwok\data\pip-cache" 2.配置文件方式 ① Windows&#xff1a; C:\Users\${用…...

编程日记 2023/9/25 3:57:35

更新、修改

MySQL从小白到总裁完整教程目录:https://blog.csdn.net/weixin_67859959/article/details/129334507?spm1001.2014.3001.5502 语法: update 表名 列名该列新值, 列名该列新值, ... where 记录匹配条件; 说明&#xff1a;update 更新、修改 set 设置 …...

编程日记 2023/9/25 3:53:32

山西电力市场日前价格预测【2023-09-25】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-09-25&#xff09;山西电力市场全天平均日前电价为442.30元/MWh。其中&#xff0c;最高日前电价为720.46元/MWh&#xff0c;预计出现在19: 00。最低日前电价为276.06元/MWh&#xff0c;预计…...

编程日记 2023/9/25 3:50:30

从collections库的Counter类看items()方法和enumerate()方法

下面的代码是针对文件的词频统计&#xff0c;使用了collections库及其Counter类 import collections def count_word_frequency(text): words text.lower().split() word_counts collections.Counter(words) return word_counts def count_fileword_frequency(fi…...

编程日记 2023/9/25 3:48:28

2023-09-24 LeetCode每日一题(LRU 缓存)

2023-09-24每日一题 一、题目编号 146. LRU 缓存二、题目链接 点击跳转到题目位置 三、题目描述 请你设计并实现一个满足 LRU (最近最少使用) 缓存 约束的数据结构。 实现 LRUCache 类&#xff1a; LRUCache(int capacity) 以 正整数 作为容量 capacity 初始化 LRU 缓存i…...

编程日记 2023/9/25 3:47:27

《计算机视觉中的多视图几何》笔记（10）

10 3D Reconstruction of Cameras and Structure 本章主要描述了如何利用2张图片来恢复相机的参数以及物体在三维空间中的形状。 文章目录 10 3D Reconstruction of Cameras and Structure10.1 Outline of reconstruction method10.2 Reconstruction ambiguity10.3 The proje…...

编程日记 2023/9/25 3:46:26

【一、虚拟机vmware安装】

安装虚拟机 下载 官方下载地址&#xff1a;https://www.vmware.com/cn.html 大概流程就是&#xff0c;最重要的事最后一步...

编程日记 2023/9/25 3:45:25

uniapp 离线打包 plus.runtime.install 安装页面不弹起

uniapp 离线打包 plus.runtime.install 安装页面不弹起 updateVersion(webview : any, eventTitle : string, eventContent : string) {const loading plus.nativeUI.showWaiting(准备下载);var dtask plus.downloader.createDownload(eventContent,{method: GET,timeout: 5…...

编程日记 2023/9/25 3:44:24

Docker 自动化部署（保姆级教程）

Docker 自动化部署 1. jenkins 介绍1.1 参考链接&#xff1a;1.2 jenkins 概述1.3 jenkins部署项目的流程 2. jenkins 安装2.1 基于docker 镜像2.2 启动 jenkins 后端服务2.3 登录 jenkins 服务后端 3. jenkins自动化部署开始3.1 下载需要的插件3.2 创建任务3.2.1 描述3.2.2 配…...

编程日记 2023/9/25 3:43:23

北工大汇编题——分支程序设计

题目要求 信息检素程序设计&#xff1a;在数据区&#xff0c;有9个不同的信息&#xff0c;编号 0-8&#xff0c;每个信息包括20 个字符。从键盘接收 0-8 之间的一个编号&#xff0c;然后再屏幕上显示出相应编号的信息内容&#xff0c;按“q”键退出 完整代码 DATAS SEGMENTn0…...

编程日记 2023/9/25 3:42:22

贴片电容耐压值选取和特性（包含实际电路和PCB）

一、一般电容的特性 ①容值大的电容&#xff0c;一般通低频率&#xff1b;  ②容值小的电容&#xff0c;一般通高频率。   注&#xff1a;详细请看这位博主的篇文章&#xff1a; 大电容为什么虑低频小电容为什么又虑高频?(个人整理) 二、贴片电容的耐压选取 ①贴片电容有2…...

编程日记 2023/9/25 3:41:21

【云原生】kubernetes中pod（进阶）

目录 一、资源限制 业务cpu 内存 1.1CPU 资源单位 1.2 内存 资源单位 示例1 示例2&#xff1a; 二、健康检查&#xff1a;又称为探针&#xff08;Probe&#xff09; 2.1探针的三种规则 2.2 Probe支持三种检查方法 2.3示例 示例1&#xff1a;exec方式 示例3&#xf…...

编程日记 2023/9/25 3:39:18

Cesium 问题：获取高度值，高度值又是相对于谁来说的

文章目录 问题分析 问题 今天在开发中&#xff0c;甲方提出一个这样的问题&#xff0c;你的高度是怎么算出来的&#xff0c;对此&#xff0c;我只知道使用并不知道怎么来的&#xff0c;因此特意查了一番资料&#xff0c;希望帮助到大家 分析 在 Cesium 中&#xff0c;我们可以使…...

编程日记 2023/9/25 3:38:18

第三、四、五场面试

第三场 共享屏幕做题&#xff08;三道简单题&#xff09; 替换空格成%20&#xff08;双指针&#xff09; 删除升序链表中的重复元素&#xff08;指针&#xff09;有效的括号&#xff08;栈&#xff09; 第四场、第五场 自我介绍 项目拷打 整个项目架构rpc模块的情况分析的数…...

编程日记 2023/9/25 3:36:15

长春疫情最新消息今天封城了/外贸谷歌优化

之前客户给了一个域名检测api接口&#xff0c;专门对接程序的&#xff0c;用于程序自动检测域名轮转&#xff0c;拦截域名自动下线用的最近买域名比较频繁&#xff0c;总是入坑&#xff0c;一不小心买回来的新域名就是已经被微信拦截的&#xff0c;估计是域名上一任主人没有善待…...

编程日记 2025/2/8 22:49:41

南开天津网站建设/网站seo平台

POE 在Quora上非常受欢迎的手机聊天机器人Poe App已经集成ChatGPT助手&#xff01;除了最初集成的三个聊天机器人Sage、Claude和Dragonfly外&#xff0c;Poe现在还加入了第四位ChatGPT。由于使用了ChatGPT API&#xff0c;因此Poe拥有真正的ChatGPT。 现在更是第一批集成了GP…...

编程日记 2025/2/8 20:22:46

福建省建设厅网站劳保核定卡/it行业培训机构一般多少钱

BrowserModule&#xff0c;CommonModule的选择&#xff1a; BrowserModule提供了启动和运行浏览器应用的那些基本的服务提供商。BrowserModule还从angular/common中重新导出了CommonModule&#xff0c;这意味着AppModule中的组件也同样可以访问那些每个应用都需要的Angular指令…...

编程日记 2025/2/8 18:41:14

灵犀科技 网站开发/网络推广工作能长久吗

<input type"number" name"phone" id"phone" /> IOS环境下&#xff0c;复制号码&#xff0c;粘贴到input&#xff0c;然后点击一个按钮&#xff0c;获取不到里面的值。 安卓环境可以 解决方法&#xff1a; <input type"text"…...

编程日记 2025/2/8 17:03:02

做日本机械零件的外贸网站/可以看封禁网站的浏览器

更多LeetCode算法与参考&#xff1a; https://github.com/kkman2008/Notebook/blob/master/notes/Leetcode%20%E9%A2%98%E8%A7%A3.md ------------------------------------ 将整数字符串转成整数值 题目 给定一个字符串str&#xff0c;如果str符合日常书写的整数形式&…...

编程日记 2025/2/8 13:41:14

广州沙河一起做网站/企业策划书

一、正则解析csv csv文件规范&#xff1a;https://blog.csdn.net/u014644574/article/details/105165673 花了不少时间&#xff0c;结合正则写的解析csv文件&#xff0c;完美解决单元格中有换行符、逗号、双引号问题。 测试CSV文件&#xff1a; 以下为test.csv ""…...

编程日记 2025/2/8 9:52:39