DDAC/app/layouts/mobile.vue

<template>
  <div class="mobile-layout">
    <Header />
    <main class="mobile-layout-main">
      <slot />
    </main>
    <Footer />
  </div>
</template>

<script setup>
import Header from '~/components/mobile/Header.vue'
import Footer from '~/components/mobile/Footer.vue'

// const { width } = useWindowSize()

// const updateRootFontSize = (value) => {
//   const baseWidth = 375
//   const baseFont = 37.5
//   const minFont = 32
//   const maxFont = 46
//   const nextFont = (value / baseWidth) * baseFont
//   const finalFont = Math.min(Math.max(nextFont, minFont), maxFont)

//   if (typeof document !== 'undefined') {
//     document.documentElement.style.fontSize = `${finalFont}px`
//   }
// }

// watchEffect(() => {
//   if (width.value > 0) {
//     updateRootFontSize(width.value)
//   }
// })
</script>

<style scoped lang="scss">
.mobile-layout {
  width: 100%;
  min-height: 100vh;
  background-color: #030014;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.mobile-layout-main {
  flex: 1;
  width: 100%;
  padding: 60px 16px 16px;
}
</style>