如何使用 Vue 和 Vuetify 为移动设备正确设置视口？视口不适合手机的全屏答案

【问题标题】：How to proper set viewport for mobile with Vue and Vuetify? Viewport not fit fullscreen of phone如何使用 Vue 和 Vuetify 为移动设备正确设置视口？视口不适合手机的全屏
【发布时间】：2021-11-26 15:51:40
【问题描述】：

每个人。我有 vue + vuetify 的 stange 渲染行为。当我在桌面上使用家务并更改大小时，一切都可以。但是当我使用手机 chrome 时，我收到了渲染错误（仅渲染黄色，页面内容占据左上角页面的 30%，但页脚渲染正常）如果需要，可以发送任何其他代码。如何修复页面内容以适应屏幕。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 可能存在的问题

当我在开发工具（chrome 或 firefox）中进行响应时，一切正常，当我更改为三星 iPhone 的某些手机时，我收到如下截图所示的渲染。

我的 Base.vue 代码

    <template>
  <v-app style="background-color: #EEEEEE">
    <v-container v-if="pageLoading" fluid>
      <v-row align="center" justify="center">
        <dot-loader :loading="pageLoading" color="#0000FF" size="100px"></dot-loader>
      </v-row>
    </v-container>
    <div v-else>
      <Header/>
      <notifications group="global" position="top center"/>
      <v-main class="mt-4">
        <v-container fluid class="mt-0 pt-0">
          <router-view></router-view>
        </v-container>
      </v-main>
      <Footer/>
    </div>
  </v-app>
</template>

<script>

import Header from '@/components/base/Header'
import DotLoader from 'vue-spinner/src/DotLoader.vue'
import { mapGetters } from 'vuex'
import Footer from './components/base/Footer'

export default {
  name: 'Base',
  components: {
    Footer,
    Header,
    DotLoader
  },
  computed: {
    ...mapGetters('base', ['pageLoading'])
  },
  beforeMount () {
    this.$store.commit('base/DRAWER', true)
  }
}
</script>

<style>

</style>

在路由器视图中呈现的代码

<template>
  <v-row>
    <v-col lg="9" md="9" cols="12">
      <v-row>
        <v-col lg="6" md="6" cols="12">
          <v-card :loading="componentLoading" shaped>
            
          </v-card>
        </v-col>
        <v-col lg="6" md="6" cols="12">
          <v-card shaped :loading="componentLoading">
            
          </v-card>
        </v-col>
      </v-row>
    </v-col>
    <v-col lg="3" md="3" cols="12">
      <v-row>
        <v-col>
          <v-card shaped :loading="componentLoading">
            
          </v-card>
        </v-col>
      </v-row>
    </v-col>
  </v-row>
</template>

<script>
import { mapGetters } from 'vuex'
import InstitutionSelect from '@/components/base/InstitutionSelect'
import GradeTeamSelect from '@/components/base/GradeTeamSelect'

export default {
  name: 'StaffDashboard',
  components: { InstitutionSelect, GradeTeamSelect },
  computed: {
    ...mapGetters('base', ['colors', 'componentLoading', 'adminStaff']),
 some other js code not related to display features
}
</script>

<style scoped>

</style>

非常感谢您的帮助。

【问题讨论】：

有什么问题？
我假设您希望“页面内容”适合整个屏幕。这对我来说像是一个css 问题，与vue 无关。
页面内容不会全屏显示，只会显示在左上角。但是页脚渲染没问题，
我没有使用 css 仅内置 vuetify 功能。如果我使用相同的屏幕尺寸 ob 桌面 chrome/firefox 一切正常。
@Beliaf vuetify 使用 css。您能否在屏幕截图中提供<router-view></router-view> 中加载的组件代码？

标签： javascript html css vue.js vuetify.js

【解决方案1】：

我是对的，问题在<meta name="viewport"

我帮助设置了下一个<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> 所以我将user-scalable=no 添加到视口。

【讨论】：