Vuetify应用小屏适配问题：禁止缩放及右侧空白修复求助

Hey Chris, I’ve run into this exact kind of problem with Vuetify apps before—let’s break down how to fix both the scaling restriction and the blank space issue for good.

1. Stop User Scaling on Mobile/Tablet Devices #

The first step is to lock down viewport scaling, which is controlled by the meta tag in your root index.html file. Most likely, your current viewport tag doesn’t include the user-scalable=no directive. Here’s what you need to add:

<!-- Add this inside the <head> tag of your index.html -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

This tells mobile browsers to match the device’s screen width, set the initial zoom to 100%, and prevent users from zooming in/out entirely.

2. Ensure Your App Fills the Entire Screen #

Next, let’s fix the blank space on the right. A few quick tweaks to your Vuetify components should resolve this:

a. Make Containers Full-Width #

Your current v-container uses default settings, which have a max-width that might not stretch fully on certain screen sizes. Add the fluid prop to remove that max-width constraint:

<!-- In your page component -->
<v-container fluid>
  <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>

b. Verify Root Component Styles #

Double-check that your v-app and v-main components are set to take full height/width. Vuetify’s default styles should handle this, but you can add a quick style override in your App.vue to be safe:

<!-- In App.vue's <style> section -->
<style>
#app {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden; /* Prevents horizontal scroll/blank space */
}
</style>

The overflow-x: hidden is key here—it ensures any accidental overflow (from scaling or component misalignment) doesn’t create horizontal scroll or blank space.

c. Check for Unintended Widths #

Make sure none of your custom components or elements have hard-coded width values (like width: 1200px) that would break responsiveness on smaller screens. Stick to Vuetify’s grid system (cols/xs/sm etc.) and relative units (%, vw) instead.

3. Test Across Devices #

After making these changes, test your app on actual mobile/tablet devices or browser dev tools’ device emulators. You should see:

• No ability to zoom in/out
• The app fills the entire screen without any blank space on the right
• All pages inherit these fixes since we’re modifying the root index.html and App.vue

Let me know if you still run into issues after trying these steps—sometimes there’s a rogue component causing overflow that we might need to track down!

内容的提问来源于stack exchange，提问作者Chris