Aller au contenu principal
Menu
Offcanvas

Modifier la balise meta viewport sur Drupal 8

Vous pouvez désactiver les capacités de zoom sur les appareils mobiles en ajoutant user-scalable = no à la balise Meta de la fenêtre d'affichage. Cela désactive le zoom, ce qui signifie que les utilisateurs ne peuvent que faire défiler et que votre site ressemble un peu plus à une application native. 

 

Afin de modifier la balise meta viewport, vous devez placer ce code dans votre fichier .theme situé dans votre dossier de sous-thèmes:

function THEME_NAME_page_attachments_alter(&$page) {
  $viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'name' => 'viewport',
      'content' => 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no',
    ),
  );
  $page['#attached']['html_head'][] = [$viewport, 'viewport'];
}

Il y a également un module pour faire cette modification de viewport : Viewport

Viewport est un module simple qui fournit une interface utilisateur à partir de laquelle on peut définir les pages pour lesquelles une méta-balise HTML viewport sera ajoutée à l'en-tête HTML

Module Drupal Viewport Settings

En revanche, Apple depuis iOS 10 a supprimé la possibilité de désactiver le zoom pour des raisons UX. Il est vrai que cela est considéré comme une mauvaise pratique d'empêcher l'utilisateur de zoomer. Cela peut se comprendre pour un site web classique ou un utilisateur peut avoir besoin de zoomer sur une image. Mais dans le cas d’une web app, ce choix est bloquant. Cette fonctionnalité est essentielle pour obtenir le rendu d’une application native. Il existe des solutions JS pour contourner le problème mais elles ne sont pas sans risques. J’en ai testé plusieurs et il peut arriver que le scroll soit désactivé par exemple ou qu'elle ne fonctionne pas toujours. 

Autres ressources utiles

Ajouter un commentaire

Articles similaires

Comment supprimer les changements locaux avec git que l'on n'a pas commit ?

LIRE LA SUITE