diff --git a/frontend/src/App.vue b/frontend/src/App.vue index a3bc6c9..aec42e3 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -32,6 +32,7 @@ type AppMessage = { const REFERENCE_VIEWPORT_WIDTH = 1920 const REFERENCE_VIEWPORT_HEIGHT = 1080 const PHONE_BASE_SCALE = 0.69 +const isDevelopment = import.meta.env.DEV const phone = usePhoneStore() const clock = useClockStore() @@ -39,12 +40,7 @@ const notifications = useNotificationsStore() const route = useRoute() const isAppRoute = computed(() => route.name === 'app') const systemColorScheme = window.matchMedia('(prefers-color-scheme: dark)') -const viewportScale = ref( - Math.min( - window.innerWidth / REFERENCE_VIEWPORT_WIDTH, - window.innerHeight / REFERENCE_VIEWPORT_HEIGHT, - ), -) +const viewportScale = ref(getViewportScale()) const phoneResolutionStyle = computed(() => ({ '--phone-edge-gap': `${24 * viewportScale.value}px`, '--phone-zoom': @@ -57,6 +53,16 @@ const phoneFrameImage = computed( ) let clockTicker: ReturnType | undefined +function getViewportScale(): number { + const heightScale = window.innerHeight / REFERENCE_VIEWPORT_HEIGHT + if (isDevelopment) return heightScale + + return Math.min( + window.innerWidth / REFERENCE_VIEWPORT_WIDTH, + heightScale, + ) +} + function onMessage(event: MessageEvent): void { if (event.data?.type === 'app:open') { phone.open(event.data.data as PhoneOpenPayload) @@ -78,10 +84,7 @@ function onSystemColorSchemeChange(event: MediaQueryListEvent): void { } function updateViewportScale(): void { - viewportScale.value = Math.min( - window.innerWidth / REFERENCE_VIEWPORT_WIDTH, - window.innerHeight / REFERENCE_VIEWPORT_HEIGHT, - ) + viewportScale.value = getViewportScale() } onMounted(() => { @@ -118,7 +121,7 @@ onMounted(() => { }) } }, 1000) - if (import.meta.env.DEV) phone.open() + if (isDevelopment) phone.open() }) watch( @@ -142,7 +145,10 @@ onBeforeUnmount(() => {
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css index 695cb5b..68fd2ea 100644 --- a/frontend/src/assets/main.css +++ b/frontend/src/assets/main.css @@ -38,6 +38,10 @@ button { padding: 0 var(--phone-edge-gap, 24px) var(--phone-edge-gap, 24px) 0; pointer-events: none; } +.phone-stage--dev { + place-items: center; + padding: 0; +} .phone-stage--peek .phone-device { transform: translateY(calc(100% - 190px)); transform-origin: right bottom; diff --git a/sky_phone/source/html/index.html b/sky_phone/source/html/index.html index 77d2516..69edda8 100644 --- a/sky_phone/source/html/index.html +++ b/sky_phone/source/html/index.html @@ -4,7 +4,7 @@ Sky Phone - +