[adslot]
You might have noticed that some of the websites even after having a responsive design or even a custom mobile optimized website used to show up a zoom out view when viewed using a mobile browser. This occurs because by default, mobile devices such as iPhone or Android zoom out on webpages automatically when they are viewed, to give the user a more expansive view of the page. This is useful for the non-mobile optimized webpages appear more better in the small screen but for a already mobile optimized website its rather making the user to swipe through the pages to view various section of the website. So how to fix this? Well, its simple you have to use a viewport meta tag.
Usually a typical mobile-optimized site should contain something like the following:
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
The above meta tags make your website ready to be viewed in mobile phones and also provides an optimal width. The viewport meta tags lets you modify the “virtual viewport” of the mobile device and lets you specify the width, initial-scale property, maximum-scale, minimum-scale, and user-scalable properties.
So always make sure you have these tags in your <head> tags while using a responsive or mobile optimized theme.
For WordPress theme you can simply add the above meta tag code in you header.php file along with other meta tags before the wp_head(); code. To edit the header.php file:
Goto Appearance > Editor and choose the header.php file.
If you are using a Genesis theme, then you can add the below code in your functions.php file to add the viewport meta tags.
(Tip: Its always better to take a backup of your theme and database before attempting any editing in WordPress.)
Thanks bro. I think am going to be needing it when building a custom wapsite.
Yeah, don’t forget to add it. I had recently found that one of my site was looking ugly because of not using this meta viewport tag 🙂
hallo
it add on header only? or i have to add in punction.php?
Thanks for the awesome post.
Hey what about the blogspot.com?
should i add above meta tag ?
Hello Zen, use this code in header.php file in wordpress website. i also have same issue on my website usblyrics.com. but know its fix.
Initially I was confused how to enter meta tags to the website after see this guide so easy to practice immediately.
Free UnderConstructionPage plugin for WordPress
Its attractive free of charge underneath building sheet Plugin WordPress for please visit the page and take your decision
Thanks bro, it’s was a great idea for my website.