Adding the Viewpoint Meta Tag to the Responsive Template

by InMotion Hosting Contributor

1 Minutes, 35 Seconds to Read

Now that you have your stylesheets linked in your code for the Responsive Template, you will need to add the “Viewport Meta Tag” to your head section of your code.

What is the viewport Meta tag?

The viewport Meta tag alters the behavior of a mobile browser by modifying the “virtual viewport” of the device. The virtual viewport is the view of a mobile device screen that is other than the default view; therefore being deemed “virtual“. This allows the screen on devices to have specified zoom behaviors. Below is the code snippet we will use in our Responsive Template.

This Meta tag tells the mobile device to not zoom. This allows the Responsive Template for mobile devices to be loaded in the scripts. Below is a table of different properties that can be used for the viewpoint Meta Tag.

Meta tag “content” property attributes for “viewport“

Below is a table with an explanation of the Meta tag Viewpoint properties.

Property Description
width The width of the virtual viewport of the device.
device-width The physical width of the device’s screen.
height The height of the “virtual viewport” of the device.
device-height The physical height of the device’s screen.

initial-scale
The initial zoom when visiting the page. 1.0 does not zoom.

minimum-scale
The minimum amount the visitor can zoom on the page. 1.0 does not zoom.

maximum-scale
The maximum amount the visitor can zoom on the page. 1.0 does not zoom.

user-scalable
Allows the device to zoom in and out. Values are yes or no.

Add the Meta tag to the head section

Add the following Meta tag into your head section of your website. You will want to place the Meta tag below the other Meta tags in your head section or above your title tag.

<meta content="width=device-width" name="viewport">

Final view of Responsive Template

That’s all for the Responsive template. You should see your site appear normal in all types of devices.

Related Articles
Simple CSS Drop Down Menu
How to Align and Float Images with CSS
Creating an Under Construction or Coming Soon page
Adding the Viewpoint Meta Tag to the Responsive Template
Publishing with Microsoft Expressions Web 4
Introduction to Web Design Basics
Giving Your Developer Access to Your Account
How to remove the InMotion Coming Soon page
Helping your Designer Transfer your Website
Links to the stylesheets in Responsive Templates

23 thoughts on “Adding the Viewpoint Meta Tag to the Responsive Template”

  2. Thanks for the clarification Scott. I’ll go back to the StudioPress forum and see if I can get some help there. And thanks for the great site you guys have!

  3. Hi. I’ve just switched over to Lifestyle Pro (Genesis child theme and it is a responsive theme) and when I check my pgs with Google’s PageSpeed Insights tool, one of the things that’s dropping my Mobile User Experience score is the size of my tap targets (ie they’re too large).

    When I read further Google recommends tha I ‘configure the viewpoint’ by putting this code into the ‘head of the document’:

    <meta name=viewport content=”width=device-width, initial-scale=1″>

    That code is slightly different than the one you’ve laid out in this post. As I know very little about all of this, I have 2 questions:

    1) Why is your code different from the one Google recommends?

    2) When I enter the code (I’ve tried both yours and Google’s) into the Genesis Theme Settings/Header Script section, I’m still getting the error on PageSpeed Insights. I’ve cleared the cache and tried different browsers but no matter what I do, the added code hasn’t resolved the issue.

    a) Am I entering it in the wrong place?

    b) Do you have any suggestions as to why, if it’s the correct code and I’m entering it in the right place, it’s not resolving the issue?

    Thanks and thanks so much for your informative website and YouTube videos!

     

    1. Hello Debbie,

      1) Our code is older, so it likely needs to be updated to add the intial-scale setting. Go with Google and we will be sure to update to the most current version.

      2) a) The code should be entered just after the <head> tag.
      b) As to why it is not accepting it, I have no idea why it would not if the code was in place properly. That would require testing with some static and dynamic testing pages and then tweaking with the theme. I checked on my own WordPress site and do not get that error. I am using the default 2013 theme, so it is not a Genesis based theme. That MAY have something to do with it, but I cannot tell offhand.

      Kindest Regards,
      Scott M

    2. Thak you sooooo muchhhhhhhhh, finally i could make my site more responsive on mobile display .. Again i said thank yooooouuuuuu ^o^

  6. Hi Scott,

     

    I am really grateful for you and yours your great support and assurance that the speed pf my website is OK. Any other recommendations from your professional side would be much appreciated.

     

    Thank you kindly.

     

    Cheers,

     

    Michael.

    1. Hello Michael,

      We do appreciate your thanks and patience. At this time we have no further recommendations. However, if you have any further questions or comments, please let us know.

      Kindest regards,
      Arnel C.

    3. Hello B,

      Thanks for the comment. If you have a specific question, please let us know and we would be happy to help.

      Regards,
      Arnel C.

  7. Hi Arnel,

     

    I really appreciate your and your comrads professional advices. As I understand I do not need to be worry at all regarding Google speed and yahoo slow tests if gmetrix test is OK. Hope my site is seen pretty well on mobile devices with a reasonable speed and I do need to do anything?

    Any other tips or comments and whether I still need to add a metatview tag to my WP theme would be much appreciated.

    With much gratitude and joy,

     

    Michael.

    1. Hello Michael,

      Yes, if the GtMetrix gives you good grades you should be fine. It uses both the Google and Yahoo slow algorithms to obtain the grades. You will not need the viewpoint meta tag as the theme already behaves properly when viewed on different devices. We have checked it on PC, iPad, and Android phones and i is loading and looking fine.
      Let us know if you have any further questions!

      Kindest Regards,
      Scott M

  8. Hello Scott,  Thanks a lot fo ryour prompt and kind answer.  What I am looking for is to slow down download of my website on PC and particularly speed download and optimization of mobile devices as I was advised by diffrent Google and yahoo tests.  Thank you kindly for your assistance.  With warmest wishes,  Michael.

    1. Hello Michael,

      According to gtmetrix.com (a website performance analysis site), your website performs very well. We are not seeing issues with speed of the site. If you’re referring to download speeds on mobile devices, I also checked it on my iPad mini and it performs great. I did not see any type of slowdown. Checkout the Gtmetrix page, though. It’s a great resource for website performance. It lists all the criteria and breaks it down for you.

      I hope that helps! Please let us know if you have any further questions or comments.

      Regards,
      Arnel C.

  9. Hi Scott,

    I am so grateful for your asistance in this matter. My website is www.christian-healing-prayer.net  Any tips regrading increasing WP sites on PC and mobile devices would be much appreciated. With warmest wishes,  Michael.

    1. Hello Michael,

      I checked the theme you are using and see that it is indeed a responsive theme. I am unsure what feature you are looking for the theme to have. Is there something occurring on the site that is an issue for you?

      Kindest Regards,
      Scott M

  10. Hi James,  Thanks a lot for your ptompt answer. Looking at header.php of my theme I found in head section only the following code
    <?php wp_head(); // Hook required for scripts, styles, and other <head> items. ?> and not metatags at all. Please advise whether I should add your metaview tag at thsi section?

     

    Thank you for your assistance.

     

    Cheers,

    Mikchael.

    1. Hello Michael,

      It sounds as if you are attempting to alter WordPress files. The themes in WordPress may or may not be responsive. The information in this series is not meant for altering WP themes and could break them. I would check for a responsive theme that you like or even check with the theme developer to see if they are working on a responsive version.

      Kindest Regards,
      Scott M

  11. Hi James,  It sounds so perfectly expained to me if I have a normal website as I had before. But now my site was transformed to WordPress responsive website. Being a newbie I would apprecaite if you could write down steps to which WP files and where I need to insert this code.  Thank you kindly for your great help to all.

    Warmly, Michael.

    1. All WordPress themes are a bit different, but the code should already be in there if it is a responsive design. The location that you will want to place this would be the header.php file within your theme. This would cause it to be included within all necessary files as all other files should reference it for the header.

Comments are closed.

WordPress EDU

Need More Help?

Codeable - Hire Expert WordPress Developers

Featured Articles