在电脑端Chrome下预览问题

[tlerbao]

如下图，如果不切换到移动端预览，下面的tabbar就会超出maxwidth，这个问题怎么解决？

有的时候一个chrome需要同事调试pc版的后台和手机版，所以想直接利用maxwidth预览，而非切换到移动端模式，不然后台那边也要来回切换？

[CharleeWa]

@tlerbao 请提供一个最小 demo 示例

[tlerbao]

@CharleeWa 我就往你们的demo原封不动的view/index.vue 中增加了一个vant的tabbar

<script setup lang="ts">
import useAppStore from '@/stores/modules/app'

definePage({
  name: 'main',
  meta: {
    level: 1,
  },
})

const appStore = useAppStore()
const checked = ref<boolean>(isDark.value)

function toggle() {
  toggleDark()
  appStore.swithMode(isDark.value ? 'dark' : 'light')
}
</script>

<template>
  <main class="h-full w-full py-30">
    <VanCellGroup inset>
      <VanCell center title="🌗 暗黑模式">
        <template #right-icon>
          <VanSwitch v-model="checked" size="20px" @click="toggle()" />
        </template>
      </VanCell>

      <VanCell title="💿 Mock 指南" to="mock" is-link />
      <VanCell title="📊 Echarts 演示" to="charts" is-link />
      <VanCell title="🎨 Unocss 示例" to="unocss" is-link />
      <VanCell title="🍍 持久化 Pinia 状态" to="counter" is-link />

      <VanCell center>
        <template #title>
          <span class="mr-4 v-middle">🚀 欢迎补充</span>
          <VanTag type="primary">
            PR
          </VanTag>
        </template>
      </VanCell>
    </VanCellGroup>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">
        标签
      </van-tabbar-item>
      <van-tabbar-item icon="search">
        标签
      </van-tabbar-item>
      <van-tabbar-item icon="friends-o">
        标签
      </van-tabbar-item>
      <van-tabbar-item icon="setting-o">
        标签
      </van-tabbar-item>
    </van-tabbar>
  </main>
</template>

[CharleeWa]

@tlerbao 在 vite.config.ts 文件里，增加两行属性，可解决问题

viewport({
  appSelector: '#app',
  viewportWidth: 375,
  maxDisplayWidth: 600,
  appContainingBlock: 'auto',
  necessarySelectorWhenAuto: '.app-wrapper',
}),

PS. 生效方式的原理，可以看 postcss-mobile-forever