From 756eeb51f308c1270414d8b3c9abf34f7eb33b4d Mon Sep 17 00:00:00 2001 From: syuilo Date: Sun, 24 Jul 2022 18:44:50 +0900 Subject: [PATCH] chore(client): tweak ui --- packages/client/src/ui/universal.vue | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue index e4b5de9918..0ef0da70b5 100644 --- a/packages/client/src/ui/universal.vue +++ b/packages/client/src/ui/universal.vue @@ -70,6 +70,7 @@ import { $i } from '@/account'; import { Router } from '@/nirax'; import { mainRouter } from '@/router'; import { PageMetadata, provideMetadataReceiver, setPageMetadata } from '@/scripts/page-metadata'; +import { deviceKind } from '@/scripts/device-kind'; const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue')); const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue')); const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue')); @@ -77,10 +78,11 @@ const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars. const DESKTOP_THRESHOLD = 1100; const MOBILE_THRESHOLD = 500; +// デスクトップでウィンドウを狭くしたときモバイルUIが表示されて欲しいことはあるので deviceKind === 'desktop' の判定は行わない const isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD); -const isMobile = ref(window.innerWidth <= MOBILE_THRESHOLD); +const isMobile = ref(deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD); window.addEventListener('resize', () => { - isMobile.value = window.innerWidth <= MOBILE_THRESHOLD; + isMobile.value = deviceKind === 'smartphone' || window.innerWidth <= MOBILE_THRESHOLD; }); let pageMetadata = $ref>();