0

I was searching around but with no clear solution for me!

I would like to add the below HTML code for all my Drupal 8 website pages:

<meta name="viewport" content="width=device-width, user-scalable=no" />

How can I do that, is there a contributed module for it ?

Thank you,

4

1. Using metatag module

If you want to do it without custom coding you can try metatag module

  • enable MOBILE & UI ADJUSTMENTS submodule
  • go to metatag settings admin/config/search/metatag
  • edit the GLOBAL settings
  • under MOBILE & UI ADJUSTMENTS fill in viewport input box

    enter image description here

2. Using viewport module

There is also a dedicated module called viewport which will allow you to do just that.

3. In your custom theme

But can be easily done in your custom theme. Put the following code inside the THEMENAME_preprocess_html function in your THEMENAME.theme

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

NOTE: if THEMENAME_preprocess_html function does not exist you can create it and put the code inside. You can't redeclare it otherwise you will end up with WSOD.

function THEMENAME_preprocess_html(&$variables) {
  //...
}
| improve this answer | |
  • The metatag module focuses on tags related to the page content, and does not provide a field to set a viewport tag. – gapple Mar 28 '19 at 20:12
  • It actually does ;-) – GiorgosK Mar 28 '19 at 22:05
  • I missed it only looking at the main module :p – gapple Mar 28 '19 at 22:12
  • @GiorgosK can you please state the difference between using 'viewport' or the code you provided in my custom theme ? – Elie Masaad Mar 28 '19 at 23:24
  • 1
    Using the preprocess function is a light weight solution compared to using metatag for just this. But if you are already using metatag in your project you can probably use it for viewport as well. – GiorgosK Mar 29 '19 at 0:05
4

A) Theme Template

Probably the simplest way to add a viewport metatag is to edit your site theme's html.html.twig template.

If you don't yet have a custom theme for your site, and are only using a builtin or contributed theme, you can read the Drupal 8 Themeing Guide to find out more about how the theme system works, and how to create a sub-theme for your site.

B) Page Attachments

Another way to add additional metatags is by implementing hook_page_attachments() in a module. This is usually done when the value of the metatag may change, but works fine with a constant value as well.

function MY_MODULE_page_attachments(array &$attachments) {
  $attachments['#attached']['html_head'][] = [
    [
      '#type' => 'html_tag',
      '#tag' => 'meta',
      '#attributes' => [
        'name' => 'viewport',
        'content' => 'width=device-width, user-scalable=no',
      ],
    ],
    'meta-viewport',
  ];
}
| improve this answer | |
  • Thank you, implementing hook_page_attachments() in a module is indeed working but I will stick with .theme file as it is more simple! – Elie Masaad Mar 29 '19 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.