fix: 上次适配浏览器、系统缩放时的bug，尤其是不能用devicePixelRatio。

src/components/HotspotCompSmall.vue

@@ -13,9 +13,11 @@
 </template>
 
 <script setup>
-import { useDevicePixelRatio } from '@vueuse/core'
+import { useWindowSize } from "@vueuse/core"
+
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+const { width: windowWidth, height: windowHeight } = useWindowSize()
 
-const { pixelRatio } = useDevicePixelRatio()
 </script>
 
 <style lang="less" scoped>
@@ -27,8 +29,8 @@ const { pixelRatio } = useDevicePixelRatio()
   cursor: pointer;
   >img{
     flex: 0 0 auto;
-    width: calc(28px / v-bind('pixelRatio'));
-    height: calc(28px / v-bind('pixelRatio'));
+    width: calc(28px/ v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(28px/ v-bind('windowHeightDesign') * v-bind('windowHeight'));
   }
   >.text{
     margin-top: -0.3em;
@@ -36,10 +38,10 @@ const { pixelRatio } = useDevicePixelRatio()
     white-space: pre;
     font-family: KaiTi, KaiTi;
     font-weight: 400;
-    font-size: calc(26px / v-bind('pixelRatio'));
+    font-size: calc(26px/ v-bind('windowHeightDesign') * v-bind('windowHeight'));
     color: #FFFFFF;
-    line-height: calc(30px / v-bind('pixelRatio'));
-    text-shadow: 0px 0px calc(3px / v-bind('pixelRatio')) rgba(0,0,0,0.75);
+    line-height: calc(30px/ v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    text-shadow: 0px 0px calc(3px/ v-bind('windowHeightDesign') * v-bind('windowHeight')) rgba(0,0,0,0.75);
     letter-spacing: 0.15em;
   }
 }

src/views/BambooList.vue

@@ -171,9 +171,6 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
-import { useDevicePixelRatio } from '@vueuse/core'
-
-const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -409,19 +406,19 @@ function onClickBack() {
       >h1{
         font-family: KingHwa_OldSong, KingHwa_OldSong;
         font-weight: 400;
-        font-size: calc(60px / v-bind('pixelRatio'));
+        font-size: calc(60px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         color: #FFFFFF;
-        line-height: calc(75px / v-bind('pixelRatio'));
-        text-shadow: 0px 0px calc(2px / v-bind('pixelRatio')) rgba(0,0,0,0.25);
+        line-height: calc(75px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        text-shadow: 0px 0px calc(2px / v-bind('windowHeightDesign') * v-bind('windowHeight')) rgba(0,0,0,0.25);
         margin-bottom: 1em;
       }
       >p{
         width: 24.2vw;
         font-family: KaiTi, KaiTi;
         font-weight: 400;
-        font-size: calc(30px / v-bind('pixelRatio'));
+        font-size: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         color: #FFFFFF;
-        line-height: calc(45px / v-bind('pixelRatio'));
+        line-height: calc(45px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         text-align: justified;
         text-indent: 2em;
       }

src/views/MoreContent.vue

@@ -248,9 +248,6 @@ import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
 import OperationTip from "@/components/OperationTip.vue"
-import { useDevicePixelRatio } from '@vueuse/core'
-
-const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -288,7 +285,7 @@ const layer4Left = ref(layer4InitialLeft)
 
 // layer3Left位移
 const layer3SpeedFactor = 0.8 * 0.8
-const layer3InitialLeft = 600 / pixelRatio.value * windowHeight.value / windowHeightDesign
+const layer3InitialLeft = 600 * windowHeight.value / windowHeightDesign
 const layer3Left = ref(layer3InitialLeft)
 
 // layer2Left位移

src/views/PaintingDetailForTaoZhu.vue

@@ -233,10 +233,10 @@ function showBigPainting() {
   }
   >button.view-img{
     position: absolute;
-    left: 35px;
-    bottom: 55px;
-    width: 48px;
-    height: 48px;
+    left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    bottom: calc(55px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     >img{
       width: 100%;
       height: 100%;

src/views/PaintingDetailForZhuQin.vue

@@ -163,10 +163,10 @@ function showBigPainting() {
   >.painting-wrap{
     position: absolute;
     left: 50%;
-    top: calc(50% - 18px);
+    top: calc(50% - 18px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transform: translate(-50%, -50%);
-    width: 810px;
-    height: 443px;
+    width: calc(810px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(443px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     overflow: hidden;
     >img.painting-border{
       position: absolute;
@@ -178,10 +178,10 @@ function showBigPainting() {
     >img.painting{
       position: absolute;
       top: 50%;
-      left: 116px;
+      left: calc(116px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       transform: translate(0, -50%);
-      width: 634px;
-      height: 387px;
+      width: calc(634px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      height: calc(387px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       object-fit: contain;
     }
     >img.right-border-for-animation{
@@ -193,28 +193,28 @@ function showBigPainting() {
   >.bottom-text{
     position: absolute;
     left: 50%;
-    top: calc(50% + 236px);
+    top: calc(50% + 236px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     transform: translateX(-50%);
     >p{
       text-align: center;
       font-family: KaiTi, KaiTi;
       font-weight: 400;
-      font-size: 24px;
+      font-size: calc(24px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       color: #E1EDD9;
-      line-height: 28px;
+      line-height: calc(28px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       white-space: pre;
       margin-bottom: 0.2em;
     }
   }
   >.right-text{
     position: absolute;
-    top: calc(278px / v-bind('windowHeightDesign') * v-bind('windowHeight'));;
-    left: calc(50% + 504px);
+    top: calc(310px / v-bind('windowHeightDesign') * v-bind('windowHeight'));;
+    left: calc(50% + 504px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     display: flex;
     align-items: center;
-    @media (max-width: 1420px) {
+    @media (max-width: calc(1420px / v-bind('windowHeightDesign') * v-bind('windowHeight'))) {
       left: initial;
-      right: 10px;
+      right: calc(10px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
     >img.title{
       height: calc(302px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
@@ -244,10 +244,10 @@ function showBigPainting() {
   }
   >button.view-img{
     position: absolute;
-    left: 35px;
-    bottom: 55px;
-    width: 48px;
-    height: 48px;
+    left: calc(35px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    bottom: calc(55px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     >img{
       width: 100%;
       height: 100%;

src/views/PaintingList.vue

@@ -12,8 +12,8 @@
     <SerialFrames
       class="bg-serial-frames-top"
       :image-src="require(`@/assets/images/serial-frame-painting-list-top.png`)"
-      :total-width="13194 / pixelRatio"
-      :height="865 / pixelRatio"
+      :total-width="13194 / windowHeightDesign * windowHeight"
+      :height="865 / windowHeightDesign * windowHeight"
       :frame-number="33"
       :frame-duration="55"
     />
@@ -225,9 +225,6 @@ import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
-import { useDevicePixelRatio } from '@vueuse/core'
-
-const { pixelRatio } = useDevicePixelRatio()
 
 const getPaintingSize = utils.getPaintingSize
 
@@ -418,7 +415,7 @@ onBeforeUnmount(() => {
   >.bg-serial-frames-bottom{
     position: absolute;
     bottom: 0;
-    right: calc(175px / v-bind('pixelRatio'));
+    right: calc(175px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     height: calc(300 / v-bind('windowHeightDesign') * v-bind('windowHeight') * 1px);
     transform: translate(0, 10%) scale(1);
     transform-origin: bottom left;
@@ -674,17 +671,17 @@ onBeforeUnmount(() => {
           >.size{
             font-family: KingHwa_OldSong;
             font-weight: 400;
-            font-size: calc(17px / v-bind('pixelRatio'));
+            font-size: calc(17px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
             color: #474747;
-            line-height: calc(19px / v-bind('pixelRatio'));
+            line-height: calc(19px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
             margin-bottom: 0.5em;
           }
           >.position{
             font-family: KingHwa_OldSong;
             font-weight: 400;
-            font-size: calc(17px / v-bind('pixelRatio'));
+            font-size: calc(17px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
             color: #474747;
-            line-height: calc(19px / v-bind('pixelRatio'));
+            line-height: calc(19px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
           }
         }
       }

src/views/PoemList.vue

@@ -156,9 +156,6 @@ import { useStore } from "vuex"
 import useSmoothSwipe from "@/useFunctions/useSmoothSwipe.js"
 import { useWindowSize } from "@vueuse/core"
 import OperationTip from "@/components/OperationTip.vue"
-import { useDevicePixelRatio } from '@vueuse/core'
-
-const { pixelRatio } = useDevicePixelRatio()
 
 const route = useRoute()
 const router = useRouter()
@@ -171,7 +168,7 @@ const scrollTarget = ref(null)
 const { width: windowWidth, height: windowHeight } = useWindowSize()
 
 const maxTranslateLength = computed(() => {
-  return (windowHeight.value * windowWidthDesign) / windowHeightDesign - 800 // 有的图层不够长导致移动到最右侧不好看，隐藏掉。
+  return (windowHeight.value * windowWidthDesign) / windowHeightDesign - 800 * windowHeight.value / windowHeightDesign // 有的图层不够长导致移动到最右侧不好看，隐藏掉。
 })
 
 const {
@@ -493,14 +490,14 @@ const unwatch = watch(translateLength, (v) => {
     >menu.age-list{
       position: absolute;
       left: 50%;
-      bottom: calc(30px / v-bind('pixelRatio'));
+      bottom: calc(30px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       transform: translateX(-50%);
       display: flex;
       align-items: center;
-      gap: calc(20px / v-bind('pixelRatio'));
+      gap: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       >button.age{
-        width: calc(47px / v-bind('pixelRatio'));
-        height: calc(47px / v-bind('pixelRatio'));
+        width: calc(47px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+        height: calc(47px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
         position: relative;
         >img{
           position: absolute;

src/views/ShuangGou.vue

@@ -107,9 +107,7 @@ import { ref, computed, watch, onMounted, onBeforeUnmount, inject } from "vue"
 import { useRoute, useRouter } from "vue-router"
 import { useStore } from "vuex"
 import useSizeAdapt from '@/useFunctions/useSizeAdapt.js'
-import { useDevicePixelRatio } from '@vueuse/core'
-
-const { pixelRatio } = useDevicePixelRatio()
+import { useWindowSize } from "@vueuse/core"
 
 const route = useRoute()
 const router = useRouter()
@@ -122,6 +120,9 @@ const {
 
 const $env = inject('$env')
 
+const { width: windowWidth, height: windowHeight } = useWindowSize()
+const windowHeightDesign = 1080 - 71 - 37 // 设计稿里视口高度。注意要减去上下边栏
+
 const hotspot1X = ref(-100)
 const hotspot1Y = ref(-100)
 const hotspot2X = ref(-100)
@@ -243,15 +244,15 @@ const activeVideoIdx = ref(0)
 
   >button.play-video{
     position: absolute;
-    bottom: calc(37px / v-bind('pixelRatio'));
-    right: calc(33px / v-bind('pixelRatio'));
+    bottom: calc(37px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+    right: calc(33px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     display: flex;
     flex-direction: column;
     align-items: center;
     >img{
-      width: calc(48px / v-bind('pixelRatio'));
-      height: calc(48px / v-bind('pixelRatio'));
-      margin-bottom: calc(14px / v-bind('pixelRatio'));
+      width: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      height: calc(48px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
+      margin-bottom: calc(14px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
     >img.icon-normal{
       display: block;
@@ -262,9 +263,9 @@ const activeVideoIdx = ref(0)
     >span{
       font-family: KaiTi, KaiTi;
       font-weight: 400;
-      font-size: calc(20px / v-bind('pixelRatio'));
+      font-size: calc(20px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
       color: #7B916B;
-      line-height: calc(23px / v-bind('pixelRatio'));
+      line-height: calc(23px / v-bind('windowHeightDesign') * v-bind('windowHeight'));
     }
   }
   >button.play-video:hover{