Merge pull request #438 from nagisa77/codex/fix-server-side-ismobile-detection-for-ssr

fix: handle mobile detection during SSR
This commit is contained in:
Tim
2025-08-08 17:00:03 +08:00
committed by GitHub

View File

@@ -1,18 +1,26 @@
import { ref, computed } from 'vue'
import { useRequestHeaders } from 'nuxt/app'
const width = ref(0)
const isClient = ref(false)
// 检测移动设备的用户代理字符串
const isMobileUserAgent = () => {
if (typeof navigator === 'undefined') return false
const userAgent = navigator.userAgent.toLowerCase()
let userAgent = ''
if (typeof navigator !== 'undefined') {
userAgent = navigator.userAgent.toLowerCase()
} else {
// 服务端:从请求头获取用户代理字符串
const headers = useRequestHeaders(['user-agent'])
userAgent = (headers['user-agent'] || '').toLowerCase()
}
const mobileKeywords = [
'android', 'iphone', 'ipad', 'ipod', 'blackberry', 'windows phone',
'mobile', 'tablet', 'opera mini', 'iemobile'
]
return mobileKeywords.some(keyword => userAgent.includes(keyword))
}
@@ -30,8 +38,8 @@ export const isMobile = computed(() => {
if (isClient.value) {
// 客户端:优先使用窗口宽度,如果窗口宽度不可用则使用用户代理
return width.value > 0 ? width.value <= 768 : isMobileUserAgent()
} else {
// 服务端:使用用户代理字符串
return isMobileUserAgent()
}
// 服务端:使用请求头中的用户代理字符串
return isMobileUserAgent()
})