0

My aim is to allow zooming in and out in mobile devices in my responsive Drupal 7 site. I have followed a Drupalize.me video and some more documentation that teach how to allow it via my theme's HTML.tpl.php and added the marked row there (Image attached), yet nothing happened. Maybe it should go to the system's HTML.tpl.php instead? maybe there is something to apply at the Drupal UI so that the site would be affected? P.S - I've cleared the Drupal cache.

enter image description here

6
  • Welcome to Drupal Answers! When there is code to be shown, please copy-paste it.
    – apaderno
    Commented Apr 28, 2015 at 3:38
  • 1
    Not sure what browser you are on or If it is all of them but I would check to see if the HTML has actually been added by inspecting the code in the browser, in chrome just right click and click inspect element and look for the changes, if they are there then try the full version of the viewport tag: <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> there is also sometimes an @viewport CSS rule that could be in your themes CSS but it shouldn't affect all browsers I don't think but I never use it, I just use the tag above. Commented Apr 28, 2015 at 3:51
  • If you want a UI type module use: drupal.org/project/viewport and remove the tag you added. Commented Apr 28, 2015 at 3:53
  • Hey @burnsjeremy, I've tried to replace the existing tag with the full one you provided and cleared cache. Afterwards I've checked from my Iphone 4 but still can't zoom in\out... Can something interrupt to this seemingly-valid tag making it's affect?
    – user16289
    Commented Apr 28, 2015 at 4:18
  • I would make sure that it is actually showing up on the page, I posted an answer with 3 different ways to achieve this. Hopefully one will work for you :) Commented Apr 28, 2015 at 4:23

1 Answer 1

4

There are several ways to achieve this.

You could hand code the meta viewport tag in your html template file as you did. The proper tag may need to be used as shown below:

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

You could also use a page alter to add the html to your page as shown below (place in theme template.php):

function YOURTHEMENAME_page_alter($page) {
  // Viewport array, change values in content below.
  $viewport = array(
    '#type' => 'html_tag',
    '#tag' => 'meta',
    '#attributes' => array(
      'name' =>  'viewport',
      'content' =>  'width=device-width, initial-scale=1.0, user-scalable=yes'
    )
  );
  // Drupal add HTML head.
  drupal_add_html_head($viewport, 'viewport');
}

Or you could use the viewport module

Note: Do not alter the system html template file, puppies will die!

4
  • I think that's kittens, not puppies that will die. Even so +1 for a good answer apart from that ;)
    – Felix Eve
    Commented Apr 28, 2015 at 4:32
  • Thanks for this rich technical detailing @burnsjeremy... I have only one question left - What can cause the first option not to work? It means much to me to know such reasons...
    – user16289
    Commented Apr 28, 2015 at 5:43
  • 2
    @FelixEve Puppies, kittens, cubs, calves...they all perish when core gets hacked
    – Clive
    Commented Apr 28, 2015 at 10:18
  • if it is actually showing I would check your theme's CSS b/c it may have an viewport (@ viewport) rule in there that could be conflicting with the meta tag, if there was no metatag present in the first place zoom should have worked and if it did not then there may be a CSS rule present. Besides that I've really never had a problem with the viewport meta tag if it's the correct place it usually works? Commented Apr 28, 2015 at 20:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.