Modifying the viewport meta tag

Posted in Snippets

The viewport meta tag exists so that the mobile browser can render your page correctly. This tag was introduced by Apple for the iPhone and tells the browser to use the width of the device’ screen as the full width of the page.
It basically tells the device how to render the layout.

If you’d like to read up on this tag. Visit the Mozilla Developer Network.

Now, you can simply echo the tag via the wp_head hook. Example below!

// Modify meta tag to prevent zoom
add_action( 'wp_head', function() {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />';
} );