I'm in the process of creating a new Drupal 7 theme on a local server and want to add viewport to the HTML header without using the viewport module.
Over the last few days I've been searching Google for all the references to 'viewport' and 'drupal' and sure enough I've found several recent web pages giving instructions on how to do this. The problem is, all the instructions are slightly different.
Some say add the code to html.tpl.php whilst others advocate adding it to template.php
When it comes to the code itself, I've found five different codes. Only small differences it's true, but differences all the same. My guess is that the information has simply been copied from an original article and amended slightly every time it's been copied
One at a time I've tried all possible combinations using both php files and all five codes, but have yet to see the code appear when I view my sites source code.
Is there someone who has already done this on their own theme, who knows their way of doing it works, and who can provide definitive information on how they have accomplished it please?
Thanks
Comments
Hello there, Yes, I have
Hello there,
Yes, I have added a viewport tag and documented it here: http://www.webomelette.com/drupal-add-html-tag-head-meta-link
Hope it helps.
You can follow me on Twitter: @drupalexp or on my blog.
Adding Viewport to HTML Header of New Theme (SOLVED)
Thanks Knob,
Your site was one of the ones that I had come across and tried, but I hadn't followed your instructions correctly. I'll add your code here to help others find it, and I'll also explain what I did wrong so that others can avoid my mistake. Your code works perfectly.
The following are Knob's instructions:
Once you have done that, clear your cache and you will find the following in your site's source code:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
My mistake (so you can avoid it!
When I created the new template.php file I added it to sites/all/themes/mytheme/templates folder (incorrect)
As stated in the instructions it should have been in the root folder of the theme in sites/all/themes/mytheme folder (correct).
Once I'd added the file to the correct folder the above code worked fine.
Hehe, so you were the one
Hehe, so you were the one :)
OK, glad it helped :)
You can follow me on Twitter: @drupalexp or on my blog.
I would suggest for a website
I would suggest for a website to allow zooming, its an accessbily issue.
In the above code maximum-scale=1 will lock the scale to 1 and not allow zooming, users who need to because of eye sight issues will not be able to use your site. Instead use the following:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
Pimp your Drupal 8 Toolbar - make it badass.
Adaptivetheme - theming system for people who don't code.
Worked like a charm - thanks
Worked like a charm - thanks so much!
It works fine
It works fine
Drupal 6
What changes to the code would need to be made for this to work on Drupal 6?
Far as I can tell your_theme_name_preprocess_html should become your_theme_name_preprocess_page, and drupal_add_html_head should be drupal_set_html_head but I've tried that out and it doesn't work, so perhaps something in the array syntax also needs changing?
Any help much appreciated.
Why can't you just add the code in the header
No need to edit or add to the template.tpl.php file, just add this code to the header of your page.tpl.php file, no module required. I am missing something??
Add this code to your page.tpl.php file.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
or like @Jeff Burnz suggests:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">