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.

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

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 name="viewport" content="width=device-width">

Final view of Responsive TemplateThat's all for the Responsive template. You should see your site appear normal in all types of devices.

Continued Education in Course 206: Creating Responsive Templates
You are viewing Section 5: Step 4: Adding the Viewpoint Meta Tag to the Responsive Template
Section 4: Step 3: Links to the stylesheets in Responsive Templates
Section 6: Responsive template design with the jQuery Theme Roller
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve this article:
Email Address
Name

new! - Enter your name and email address above and we will post your feedback in the comments on this page!

n/a Points
2014-03-27 9:33 am

Thanks it's very useful for me...Thankks alot!!!!):

n/a Points
2014-06-20 2:36 am

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.

Staff
8,314 Points
2014-06-20 7:58 am
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.
n/a Points
2014-06-22 12:12 am

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.

Staff
18,017 Points
2014-06-23 7:12 am
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
n/a Points
2014-06-23 7:39 am

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.

Staff
18,017 Points
2014-06-23 12:41 pm
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
n/a Points
2014-06-23 11:40 pm

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.

Staff
16,575 Points
2014-06-24 1:19 am
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.
n/a Points
2014-06-24 4:21 am

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.

Staff
18,017 Points
2014-06-24 8:22 am
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
n/a Points
2014-06-24 8:44 pm

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.

Staff
16,575 Points
2014-06-24 9:55 pm
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.
n/a Points
2014-07-15 1:05 pm
giving more example......
but it was really nice ..no doubt thanks a lot...!!!
Staff
16,575 Points
2014-07-15 3:26 pm
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.

Post a Comment

Name:
Email Address:
Phone Number:
Comment:
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

15 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!