jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-04-21 19:37:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: support iOS safe area for header

Browse Source
This commit is contained in:
Tim
2025-08-05 09:38:48 +08:00
parent 2b9a4d35b6
commit ea1588d9e9
3 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/index.html
View File

@@ -6,7 +6,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<link rel="icon" href="<%= BASE_URL %>favicon.ico?v=20250712"> <link rel="icon" href="<%= BASE_URL %>favicon.ico?v=20250712">
<title> <title>
OpenIsle - 全面开源的自由技术社区 OpenIsle - 全面开源的自由技术社区

4
frontend/src/assets/global.css
View File

@@ -2,7 +2,9 @@
--primary-color-hover: rgb(9, 95, 105); --primary-color-hover: rgb(9, 95, 105);
--primary-color: rgb(10, 110, 120); --primary-color: rgb(10, 110, 120);
--primary-color-disabled: rgba(93, 152, 156, 0.5); --primary-color-disabled: rgba(93, 152, 156, 0.5);
--header-height: 60px; --safe-area-inset-top: constant(safe-area-inset-top);
--safe-area-inset-top: env(safe-area-inset-top);
--header-height: calc(60px + var(--safe-area-inset-top));
--header-background-color: white; --header-background-color: white;
--header-border-color: lightgray; --header-border-color: lightgray;
--header-text-color: black; --header-text-color: black;

2
frontend/src/components/HeaderComponent.vue
View File

@@ -173,6 +173,8 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
height: var(--header-height); height: var(--header-height);
padding-top: var(--safe-area-inset-top);
box-sizing: border-box;
background-color: var(--background-color-blur); background-color: var(--background-color-blur);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
color: var(--header-text-color); color: var(--header-text-color);