Add Viewport in the <head> in Drupal 7

In this Drupal Tutorial I will show how to add a new HTML in Drupal 7 head section.

I'm using responsive design to enable my blog work pretty ok on mobile devices, but yesterday looking through Google PageSpeed Insights suggestions I found that there is no viewport defined, so it might not render CSS as I might want, but instead to scale webpage to device.

Your page does not have a viewport specified. This causes mobile devices to render your page as it would appear on a desktop browser, scaling it down to fit on a mobile screen. Configure a viewport to allow your page to render properly on all devices.

What is the solution for Drupal 7?

I did a quick Google search, and found webomelette article with solution.

I added to my Drupal theme template.php following function:

function YOUR_THEME_preprocess_html(&$vars) {
 $viewport = array(
 '#tag' => 'meta',
 '#attributes' => array(
 'name' => 'viewport',
 'content' => 'width=device-width, initial-scale=1, maximum-scale=1',
 drupal_add_html_head($viewport, 'viewport');

Change YOUR_THEME to name of your theme, save the file, clear the cache and you should have viewports defined in your Drupal 7 <head> section. 

You can go check it with Google PageSpeed Insights, to see if it is working.

P.S. If you are considering a hosting for your Drupal website check out Bluehost, their shared hosting starts as low as $3.95/mo or read more about cheap Drupal hosting.