Modifier la balise meta viewport sur Drupal 8

icône viewport

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. 

Ajouter un commentaire

HTML restreint

  • Balises HTML autorisées : <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Les adresses de pages web et les adresses courriel se transforment en liens automatiquement.

Contact_

Une idée de projet, une recherche de conseil, une mission intégration ou développement ? N’hésitez pas à me contacter.