DigitCodes

Coding Notes


Follow @afsalrahim
  • PHP Codes
  • Web Design
    • CSS Tricks
  • WordPress
    • WordPress Tips
    • WordPress Themes
    • WordPress Plugins
  • Blogging
You are here: Home / Web Design / Adding viewport meta tag to make your website ready for mobile

Adding viewport meta tag to make your website ready for mobile

December 1, 2012 by Afsal Rahim 9 Comments

Adding viewport meta tag to make your website ready for mobile

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

Filed Under: Web Design Tagged With: mobile websites, Responsive theme

Comments

  1. Collizo4sky says

    January 19, 2013 at 1:59 am

    Thanks bro. I think am going to be needing it when building a custom wapsite.

    Reply
    • Afsal Rahim says

      January 20, 2013 at 11:59 pm

      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 🙂

      Reply
  2. zen says

    February 21, 2015 at 3:36 pm

    hallo
    it add on header only? or i have to add in punction.php?

    Reply
  3. Aniruddha Ravichandran says

    June 28, 2015 at 2:57 pm

    Thanks for the awesome post.
    Hey what about the blogspot.com?
    should i add above meta tag ?

    Reply
  4. Dev Preet says

    September 16, 2016 at 12:10 pm

    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.

    Reply
  5. Konveksi kaos says

    March 31, 2017 at 11:39 am

    Initially I was confused how to enter meta tags to the website after see this guide so easy to practice immediately.

    Reply
  6. initial-scale says

    September 23, 2017 at 8:03 pm

    Free UnderConstructionPage plugin for WordPress

    Reply
  7. width=device-widt says

    September 23, 2017 at 8:56 pm

    Its attractive free of charge underneath building sheet Plugin WordPress for please visit the page and take your decision

    Reply
  8. Vendor Kaos Bandung says

    September 26, 2018 at 2:26 pm

    Thanks bro, it’s was a great idea for my website.

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Sponsered

FREE Email Updates

Subscribe to our newsletter to get all the latest updates to your inbox..!



TRENDING

Create a Simple PHP BBCode Parser function

How to Embed a Tweet in Your Blog Post ?

Add a Stylish Email Subscription Form for your Blog

The Making of DigitCodes: Ideas & Codes + WordPress

Return to top of page

Copyright © 2016 · digitcodes.com · Privacy Policy · Contact Us