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.)