Vuetify 停止在小型显示器上缩小网站

Question

我在我的网络应用程序中使用 Vuetify。整个网络应用程序是响应式的。我的问题是在较小的屏幕（智能手机、平板电脑）上我可以缩小网站，这意味着我的网站右侧有一个白色的 space。

我不知道这是怎么发生的，我的网络应用程序的每个页面都是这样。我该怎么做才能从整个 space 开始使用，而用户无法缩小网站并在左侧得到这个白色 space？

下面是一个简短的例子：

<template>
  <v-app>
    <v-main>
      <v-container>
        <v-row justify="center" align="center">
          <v-col cols="12" xs="10" sm="10" md="10" lg="10" xl="10">
            TEST_COL
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</template>


<script>

  export default {
    data: () => ({  
    }),
  }

</script>

<style>
</style>

也许问题出在 App.vue 文件中，但我没有发现那里有任何问题。为了确保我 post 下面的 app.vue:

<template>
  <v-app>
    <Navbar />
    <v-main>
      <router-view></router-view>
    </v-main>
    <Footer />
  </v-app>
</template>

我在下面放了两张截图让你明白我的意思。

谢谢！克里斯

Answer 1

我得到了答案。我使用 Vuetify 提供的 <v-navigation-drawer> 创建了一个抽屉对象。我使用了以下选项：

<v-navigation-drawer v-model="drawer" absolute temporary right>

但 absolute 的意思是“将位置：绝对应用于组件”。这意味着它在网站上需要额外的 space。该选项必须是“固定”而不是“绝对”才能起作用。

好的设置是：

<v-navigation-drawer v-model="drawer" fixed temporary right>

现在抽屉在网站的右侧打开（更适合智能手机）并且不需要任何绝对 space!!

Vuetify 停止在小型显示器上缩小网站

Vuetify stop zoom out Website on small displays

grid

whitespace

web-project

vue.js

vuetify.js