Ver código fonte

bug fix: 有些傻逼移动端浏览器里软键盘弹出会导致视口变矮,所以布局方案要调整。

任一存 2 anos atrás
pai
commit
6966aa7a15

+ 3 - 0
game/src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import { userAgentInfo } from '@/store/non-reactive.js'
 import "@/assets/style/reset.css"
 import "@/assets/style/my-reset.css"
 import UAParser from "@/libs/ua-parser.min.js"
@@ -39,6 +40,8 @@ if (uaInfo.browser && uaInfo.browser.name === 'Safari') {
 if (uaInfo.device.type === 'mobile') {
   app.provide('$isMobile', true)
 }
+// eslint-disable-next-line
+userAgentInfo = uaInfo
 
 // 处理resize事件
 let windowWidthLast = window.innerWidth

+ 1 - 0
game/src/store/non-reactive.js

@@ -0,0 +1 @@
+let userAgentInfo = null

+ 7 - 4
game/src/useFunctions/useSizeAdapt.js

@@ -2,6 +2,7 @@
 // width: calc(950 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
 
 import { onBeforeUnmount, ref } from 'vue'
+import { userAgentInfo } from '@/store/non-reactive.js'
 
 export default function useSizeAdapt(windowWidthWhenDesign = 1920, windowHeightWhenDesign = 1080) {
   const windowSizeInCssForRef = ref('')
@@ -18,10 +19,12 @@ export default function useSizeAdapt(windowWidthWhenDesign = 1920, windowHeightW
   }
 
   compute()
-  window.addEventListener('resize', compute)
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', compute)
-  })
+  if (userAgentInfo.device.type !== 'mobile' || userAgentInfo.os.name === 'iOS' || (userAgentInfo.browser.name !== 'WeChat' && !userAgentInfo.browser.name.includes('huawei'))) {
+    window.addEventListener('resize', compute)
+    onBeforeUnmount(() => {
+      window.removeEventListener('resize', compute)
+    })
+  }
 
   return {
     windowSizeInCssForRef,

+ 1 - 1
game/src/views/RedeemForm.vue

@@ -260,7 +260,7 @@ function submit() {
     position: absolute;
     width: calc(348 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     height: calc(60 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-    bottom: calc(59 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    top: calc(630 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     left: 50%;
     transform: translate(-50%, 0);
     background-color: #FFE6A5;