顶部安全距离调整

index.html

@@ -17,7 +17,7 @@
   <link rel="alternate icon" href="/favicon.ico" type="image/png" sizes="16x16" />
   <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" />
   <link rel="mask-icon" href="/favicon.svg" color="#FFFFFF" />
-  <!-- <meta id="theme__color" name="theme-color" content="#000" /> -->
+  <meta id="theme__color" name="theme-color" content="#000" />
   <link rel="manifest" href="/manifests.json" />
   <style>
     body {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.108",
+  "version": "2.14.117",
   "private": true,
   "scripts": {
     "dev": "vite --host",

src/components/NavBar.vue

@@ -3,6 +3,8 @@
   <div v-if="isPWA" style="padding-top: 60px" />
   <div class="nav-bar-wrapper">
     <nav>
+      <!-- &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {{ navBarHeight }} {{ wh }}    {{ topHeight }}-->
+
       <nut-navbar
         @on-click-back="back"
         @on-click-right="showLangSwitchPopup = true"
@@ -79,7 +81,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref } from "vue";
+import { computed, ref, onBeforeMount, onMounted } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute, useRouter } from "vue-router";
 import { useGlobalStore } from "@/store/global";
@@ -104,10 +106,17 @@ const isPWA = ref(
     false
 );
 
+// 736 <8p
 if (isPWA.value) {
-  navBarHeight.value = "110px";
-  navBartop.value = "58px";
-  navBartopRight.value = "70px";
+  if (window.innerHeight < 750 || /iPad/.test(navigator.userAgent)) {
+    navBarHeight.value = "78px";
+    navBartop.value = "25px";
+    navBartopRight.value = "38px";
+  } else {
+    navBarHeight.value = "110px";
+    navBartop.value = "58px";
+    navBartopRight.value = "70px";
+  }
 }
 
 const isNeedBack = computed(() => {

src/store/appNotify.ts

@@ -3,12 +3,21 @@ import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 
 const isPWA = () => {
-  return (
-    (window.matchMedia("(display-mode: standalone)").matches &&
-      !/Android/.test(navigator.userAgent)) ||
-    false
-  );
+  let h = 0 as number;
+  if (
+    window.matchMedia("(display-mode: standalone)").matches &&
+    !/Android/.test(navigator.userAgent)
+  ) {
+    h = 60;
+    if (window.innerHeight < 750 || /iPad/.test(navigator.userAgent)) {
+      h = 18;
+    }
+  } else {
+    h = 0;
+  }
+  return h;
 };
+
 export const useAppNotifyStore = defineStore("appNotify", {
   state: (): AppNotifyStoreState => {
     return {
@@ -17,7 +26,7 @@ export const useAppNotifyStore = defineStore("appNotify", {
       content: "",
       type: "primary",
       duration: 800,
-      navBartop: isPWA() ? 60 : 0,
+      navBartop: isPWA(),
     };
   },
   getters: {},