Step 4: Adding the Viewpoint Meta Tag to the Responsive Template
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.
That's all for the Responsive template. You should see your site appear normal in all types of devices.
|
‹
Section 4: Step 3: Links to the stylesheets in Responsive Templates
|
›
Section 6: Responsive template design with the jQuery Theme Roller
|
Related Questions
Support Center Login
Our Login page has moved. Please click the button below to be redirected to the login page.Recent Articles
Creating Responsive Templates
Introduction to Responsive Web Design | |
| 1. | Introduction: Creating a Responsive Web Design |
Creating a Custom Responsive Template | |
| 2. | Step 1: Adding HTML to the Responsive Template |
| 3. | Step 2: Adding CSS styles to a Responsive Template |
| 4. | Step 3: Links to the stylesheets in Responsive Templates |
| 5. | Step 4: Adding the Viewpoint Meta Tag to the Responsive Template |
Customize the look of your Responsive Template | |
| 6. | Responsive template design with the jQuery Theme Roller |
| 7. | Styling a Responsive Template with jQuery Theme Roller |
| 8. | Custom CSS Styles with the Bootstrap Theme Roller |
| 9. | Adding the Bootstrap files to your Responsive Template |
| 10. | Adding the Bootstrap Menu Buttons to your Responsive Template |
| 11. | Twitter Bootstrap Common classes and HTML styles |
Free Responsive Web Design Themes | |
| 12. | Free Responsive Templates with jQuery Theme Roller styles |
n/a Points
|
2016-01-26 11:27 pm
I am use themes free.....thanks |
|
n/a Points
|
2015-04-24 8:13 pm
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!
|
 Staff 43,761 Points
|
2015-04-27 10:59 am
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 |
|
n/a Points
|
2015-04-27 11:44 am
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! |
|
n/a Points
|
2015-01-18 7:15 am
Thak you sooooo muchhhhhhhhh, finally i could make my site more responsive on mobile display .. Again i said thank yooooouuuuuu ^o^
|
|
n/a Points
|
2015-01-08 7:25 am
Yes you can improve this by providing step by step example. or any live web site.
|
|
n/a Points
|
2014-12-22 10:04 am
Hi, It is very useful. Simple to understand. Thanks a lot:))) |
|
n/a Points
|
2014-10-12 8:44 pm
very helpful ! |
|
n/a Points
|
2014-07-15 1:05 pm
giving more example......
but it was really nice ..no doubt thanks a lot...!!! |
 Staff 42,678 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. |
|
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 42,678 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-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 43,761 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-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 42,678 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-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 43,761 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-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 43,761 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-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 11,186 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-03-27 9:33 am
Thanks it's very useful for me...Thankks alot!!!!): |
Search
Ask the Community!
Current Customers
| Chat: | Click to Chat Now | E-mail: | support@InMotionHosting.com |
|---|---|---|---|
| Call: | 888-321-HOST (4678) | Ticket: | Submit a Support Ticket |
Post a Comment