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

Apprenez à configurer votre application web avec des paramètres de base de JavaScript et de CSS pour qu'elle ait l'air et se sente comme une application native, y compris la désactivation des effets de survol.

Crédits de l'article

Martin Donadieu

Auteur

Valeria

Relecteur

Jordan

Éditeur

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

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

Désactiver les effets de survol

On touch devices, hover effects can be problematic as they don’t have a true hover state like desktop devices. To disable hover effects on touch devices, you can use the following CSS code:

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

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

Désactiver l'affichage de la prévisualisation des liens

To disable link preview on touch devices, you can use the following JavaScript code:

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

Désactiver la sélection

To disable text selection, add the following CSS code to your stylesheet:

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

Désactiver 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">

Zone de CSS sécurisée

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

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 for a Native App Look

Si vous utilisez Basic JS and CSS Configurations for a Native App Look pour planifier les tableaux de bord et les opérations API, connectez-l’avec API Overview pour le détail d'implémentation dans API Vue d'ensemble Introduction pour le détail d'implémentation dans Introduction API Clés pour le détail d'implémentation dans API Clés Appareils pour le détail d'implémentation dans Appareils, et Ensembles pour le détail d'implémentation dans Ensembles.