diff --git a/frontend_nuxt/utils/screen.js b/frontend_nuxt/utils/screen.js index a32e999aa..6b792105f 100644 --- a/frontend_nuxt/utils/screen.js +++ b/frontend_nuxt/utils/screen.js @@ -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() })