Specify how your WordPress Site Should be Viewed on Mobile Devices

Smartphone internet browsing is on the rise

With the rise of the smartphone, readers are increasingly turning to their mobile devices to read your content. So, you want to be sure that it’s being seen the way you intend for it to be seen.

One way that you can make sure of this is to use the Viewport metatag. It is a standard that was developed by Apple at the introduction of the iPhone. It is now supported by most mobile devices, including iPhone, iPad and Android.

It allows you to specify what zoom level your site should be set to when it is loaded, how far in or out a user can zoom and even to disable zooming if you wish.

For example, to set the width of your site to the width of the device, load the site with a 1.0x zoom and allow scaling between 0.6x and 2.4x, then you would use a meta tag like this, which goes in your head section. You can either put it there manually in header.php, or you can use a function to place it there, which I’ll show you later:

Another example, to set the width of the device to 640 pixels, the height to 960 pixels and disable zooming, would look like this:

There’s more specifics on the details of the viewport tag on Apple’s developer website. It also has a few other tweaks that you can make, such as turning the status bar black when viewing your site, or running your site in full-screen mode by using the following meta tag:

If you want to use a function to add these to your header instead of messing with your theme files, then put something like this into your functionality plugin:

8 thoughts on “Specify how your WordPress Site Should be Viewed on Mobile Devices”

  1. Travis says:

    With all these smart phones with full browsers, does “mobile” formatting matter as much? I know on my Android phone, if I get to a “mobile” version of a site, I am annoyed.

    Do people still want mobile formatted sites, coded levels of zoom, etc?

    1. Well, I think these are two different issues. I also don’t care for mobile sites and don’t deploy them on my own sites. However, these meta tags enable you to dictate the particulars of showing a “full site” within the confines of a mobile screen, rather than show a different site altogether.

  2. Travis says:

    Ahh, I see. I guess I was thinking of how it would affect the overall feel of the site if you put in limits or boundaries on what the mobile device can see.

    I need to test this out, see how it will work in practice. I do see the benefit though.

  3. Robert says:

    I’m with Travis in that I don’t care for mobile versions of sites. However, because of how smart phones changed the game in terms of how Internet information is consumed, mobile versions will probably still continue to be grow in terms of their prominence.

    Dave, I like that you’ve given those of us who would rather stick to showing our full site a few more options rather than being pigeonholed into creating a mobile version. I’m sure mobile versions have their benefits, but personally, I’d much rather stick to showing my full site.

    1. I’m with you Robert. Smartphones are advanced enough that they display full sites (unless they’re massively media intensive, or contain Flash for instance) very well, so I too have opted to not use a mobile-specific version for my site.

      1. katy says:

        Robert, I think you should care for mobile sites. As fast as mobile especially smartphones computing is growing you may need to pay attention to that. I think Travis is making the point that these markups are great in that you do not need to create a separate mobile website, not that mobile websites are not necessary.

        1. I think it depends on the site. Mobile sites are just trying to create an interface that is more easily read on a mobile device. Your blog may already be very easily read on a mobile device, so for some sites, it may be moot, but for other sites, particularly media-intense sites, a mobile site may be a good idea.

  4. Hi, thanks for the tip.
    I added the tag to function.php and it works great as far as the top page but as soon as I jump to another page, it leaves the web-app and opens in Safari. Is there a way to stay completely in the web-app throughout the entire website?

Leave a Reply