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: