Make your WP site a mobile web app with meta tags

Make your WP site a mobile web app with meta tags

Even if your website isn’t a traditional mobile app, you can still let visitors save your site to their home screen as an app icon.

After they bookmark your site to their home screen, they can click the icon and open up your site full screen, just like a normal app.

This is done with meta tags, which we add to the <head> section of our WordPress site.

Meta Viewport

The first, and most important, is the meta viewport tag.

Most responsive themes already have this, so you may not need to add it. View the source of one of your site pages to see if it’s already included, it looks like this:

If you already have it, skip to the next step.

The viewport meta tag below can be used if you want to disable zooming, which is great for 100% mobile app sites. (You wouldn’t want to disable zooming on a desktop site though)

iOS Specific Meta Tags

These can be used if you want to target iOS devices:


The first tag tells iOS that you want this site to open full screen (like an app) after it’s bookmarked to the users device. There will be no browser chrome, like the address bar etc.

The second tag lets you control the small horizontal black bar at the top of the screen, which displays time, battery life, etc. You can change the color, or remove it completely.

Touch Icons

To customize the way your touch icon looks, you need to add some meta tags for your custom images. Unfortunately this is very verbose, since Apple does not give us a way to use a single image for all different sizes.

There are 4 meta tags you need to include to cover the old iPhones, retina, and iPhone 5. You can use 2 images (one retina that scales down 144px by 144px, and a non-retina 114px by 114px), but you must include all 4 meta tags. In WordPress, it would look like this:

” media=”(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>
” media=”(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>



” media=”(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>
” media=”(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)” rel=”apple-touch-startup-image”>
Apple developer meta tag reference

  • Gist with all meta tags
  • Subscribe

    Get more great content like this, enter your email below.

    Share

    Loading comments...

    Leave a comment

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