L'adaptation aux terminaux mobiles est un défi majeur pour les tableaux de bord d'administration complexes. Le framework gin-vue-admin propose une architecture robuste pour garantir une expérience utilisateur fluide, quel que soit l'écran utilisé. Cette approche repose sur une combinaison de cnofigurations de vue, de détecsion proactive du matériel et de styles CSS flexibles.

Configuration fondamentale de la vue et réinitialisation CSS

La première étape de la stratégie responsive consiste à définir correctement le viewport dans le fichier index.html. Cela permet d'assurer que le moteur de rendu du navigateur interprète les dimensions réelles de l'appareil.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Pour uniformiser le rendu visuel, une couche de réinitialisation CSS est appliquée. Elle neutralise les comportements spécifiques des navigateurs mobiles, notamment sur iOS, pour éviter les redimensionnements de texte inattendus lors des changements d'orientation :

/* reset.scss */
:root {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  width: 100%;
}

Détection dynamique du terminal via des Hooks Vue

Plutôt que de se reposer uniquement sur les Media Queries CSS, le système utilise des hooks JavaScript pour piloter l'état de l'interface en temps réel. Cela permet de modifier dynamiquement les composants affichés (comme masquer une barre latérale ou simplifier un menu).

const BREAKPOINT_LIMIT = 1024; // Seuil de basculement tablette/desktop

export const useDeviceMonitor = () => {
  const appStore = useAppStore();

  const updateDeviceType = () => {
    if (!document.hidden) {
      const isMobileMode = document.body.clientWidth < BREAKPOINT_LIMIT;
      appStore.setDeviceType(isMobileMode ? 'mobile' : 'desktop');
    }
  };

  const optimizedHandler = useDebounceFn(updateDeviceType, 150);

  onBeforeMount(() => {
    window.addEventListener('resize', optimizedHandler);
    updateDeviceType();
  });

  onBeforeUnmount(() => {
    window.removeEventListener('resize', optimizedHandler);
  });
};

Adaptation de la mise en page et gestion des grilles

Le framework exploite les utilitaires de mise en page pour réorganiser les éléments de données. Par exemple, les listes de boutons d'action dans les tableaux passent d'un alignement horizontal à un empilement flexible (flex-wrap) pour éviter le débordement horizontal.

/* main.scss */
.container-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 15px;

  @media (max-width: 640px) {
    flex-direction: column;
    align-items: stretch;
    
    .el-button {
      margin-left: 0 !important;
      width: 100%;
    }
  }
}

Optimisation de l'ergonomie tactile

Sur mobile, les interactions diffèrent radicalement de l'usage d'une souris. gin-vue-admin optimise les champs de saisie et les zones cliquables pour prévenir les erreurs de manipulation. Les inputs sont stylisés pour offrir une zone de contact plus large et un feedback visuel immédiat.

/* Styles pour l'expérience tactile */
input[type='text'], 
input[type='password'],
button {
  font-size: 16px !important; /* Évite le zoom automatique sur iOS au focus */
}

.clickable-row:active {
  background-color: var(--el-fill-color-light);
  transition: background-color 0.1s ease;
}

De plus, la gestion des erreurs est adaptée. Lorsqu'une exception survient, le système peut déclencher une notification plein écran simplifiée au lieu d'une boîte de dialogue complexe, facilitant la lecture sur petit écran.

Conseils pour l'implémentation responsive

• Unités relatives : Utilisez des unités rem ou vw/vh pour les espacements et les polices afin de conserver une proportionnalité.
• Masquage sélectif : Identifiez les colonnes de tableaux non critiques et utilisez des classes utilitaires pour les masquer sur mobile (hidden-xs-only).
• Images fluides : Appliquez systématiquement max-width: 100% et height: auto pour éviter que les médias ne brisent la mise en page.
• Performance : Limitez le nombre de listeners sur l'événement resize en utilisant des fonctions de débouncing pour ne pas impacter la fluidité du défilement.