Configurations de base de JS et CSS pour un look d'app native

Découvrez comment configurer votre application web avec des paramètres de base de JavaScript et de CSS pour lui donner un look et un sentiment d'app native, y compris la désactivation des effets de survol.

Martin Donadieu

Spécialiste du contenu

Configurations de base de JS et CSS pour un look d'application native

Lors de la création d'une application web, il est essentiel de la rendre aussi naturelle et fluide que possible pour offrir une expérience utilisateur sans heurt. Dans cet article, nous couvrirons les configurations de base de JavaScript et de CSS nécessaires pour obtenir un look d'application native, y compris la désactivation des effets de survol.

Désactiver les effets de survol

Sur les appareils tactiles, les effets de survol peuvent être problématiques car ils n'ont pas d'état de survol réel comme les appareils de bureau. Pour désactiver les effets de survol sur les appareils tactiles, vous pouvez utiliser le CSS suivant code:

@media (hover: none) {
  .element:hover {
    /* Reset the hover styles */
    background-color: initial;
    color: initial;
    /* Add any other style resets needed */
  }
}

Remplacez .element par le sélecteur approprié pour les éléments que vous souhaitez désactiver les effets de survol.

Désactiver la prévisualisation des liens

Pour désactiver la prévisualisation des liens sur les appareils tactiles, vous pouvez utiliser le JavaScript suivant code:

document.addEventListener('touchstart', function(event) {
  if (event.target.tagName === 'A') {
    event.preventDefault();
  }
});

Empêcher la sélection

Pour désactiver la sélection de texte, ajoutez la règle CSS suivante code à votre feuille de style :

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Empêcher la mise à l'échelle

Pour désactiver la mise à l'échelle, ajoutez la balise meta suivante dans la tête de votre fichier HTML :

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

Ajouter une zone CSS sécurisée

Pour vous assurer que votre contenu est affiché dans la zone sécurisée de l'appareil, ajoutez la règle CSS suivante code à votre feuille de style :

body {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

Conseils supplémentaires

Utilisez des techniques de conception responsive pour vous assurer que votre application ressemble bien sur tous les appareils.
Optimisez la performance de votre application en minimisant l'utilisation de bibliothèques et de frameworks JavaScript lourds.
Testez votre application sur divers appareils et navigateurs pour vous assurer de la compatibilité et d'une expérience utilisateur cohérente.

En suivant ces configurations de base de JavaScript et de CSS, vous pouvez créer une application web qui ressemble et se comporte comme une application native, offrant une expérience utilisateur fluide et agréable.

Continuez de Basic JS et CSS Configurations pour un Look d'Application Native

Si vous utilisez Basic JS et CSS Configurations pour une application native Regardez pour planifier le tableau de bord et les opérations API, connectez-vous à API Aperçu pour les détails d'implémentation dans API Aperçu, Introduction pour les détails d'implémentation dans Introduction, API Clés pour les détails d'implémentation dans API Clés, Appareils pour les détails d'implémentation dans Appareils, et Bundles pour les détails d'implémentation dans les Bundles.