Блог

каждый. У меня есть поведение рендеринга stange с vue vuetify. Когда я использую рутинную работу и меняю размер на рабочем столе, все в порядке. Но когда я использую телефон chrome.Я получил ошибку рендеринга (рендеринг только желтого цвета, а содержимое страницы занимает 30% страницы в верхнем левом углу, но нижний колонтитул отображается нормально) При необходимости могу отправить любой дополнительный код. Как исправить содержимое страницы, чтобы оно соответствовало экрану.

Возможные проблемы с <meta name="viewport" content="width=device-width, initial-scale=1.0">

Когда я использую адаптивные инструменты разработки (chrome или firefox), все в порядке , когда я переключаюсь на какой-нибудь телефон Samsung iPhone, я получаю рендеринг, как на скриншоте ниже.

база шахт.код 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>
 

Большое спасибо за помощь.

Я был прав, проблема была в <meta name="viewport"

Для меня помогли настроить next <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> , поэтому я добавил user-scalable=no в окно просмотра.