From 3c2a34729ebcf53573e975dfc992a25d9313ec8d Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 1 Jun 2025 21:41:32 +0800
Subject: [PATCH] fix(theme): fix blog cover layout error in mobile (#611)

---
 theme/src/client/components/Blog/VPPostItem.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/theme/src/client/components/Blog/VPPostItem.vue b/theme/src/client/components/Blog/VPPostItem.vue
index 14fbb9bf..436ed0bf 100644
--- a/theme/src/client/components/Blog/VPPostItem.vue
+++ b/theme/src/client/components/Blog/VPPostItem.vue
@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { BlogPostCoverStyle, ThemeBlogPostItem } from '../../../shared/index.js'
 import VPLink from '@theme/VPLink.vue'
-import { useMediaQuery } from '@vueuse/core'
-import { computed } from 'vue'
+import { isMobile as _isMobile } from '@vuepress/helper/client'
+import { computed, onMounted, ref } from 'vue'
 import { withBase } from 'vuepress/client'
 import { useData, useInternalLink, useTagColors } from '../../composables/index.js'
 
@@ -11,8 +11,16 @@ const props = defineProps<{
   index: number
 }>()
 
+const isMobile = ref(false)
+
+onMounted(() => {
+  isMobile.value = _isMobile(navigator.userAgent)
+  window.addEventListener('resize', () => {
+    isMobile.value = _isMobile(navigator.userAgent)
+  })
+})
+
 const { blog } = useData()
-const isMobile = useMediaQuery('(max-width: 496px)')
 const colors = useTagColors()
 const { categories: categoriesLink, tags: tagsLink } = useInternalLink()