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:
[html][/html]
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)
[html][/html]
iOS Specific Meta Tags
These can be used if you want to target iOS devices:
[html]
[/html]
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:
[html]” 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
Comments
3 responses to “Make your WP site a mobile web app with meta tags”
Hi Scott,
Thnx for the tutorial. I have a problem with my M1 themed website when i’m opening it as a fullscreen webapp in iOS7 on a iPhone5 (haven’t tested it on other phones yet).
This only happens when I set it to fullscreen. It doesn’t happen within normal safari mode (with browsing buttons).
As soon as I push the Menu-button on my website (with the three horizontal stripes), it shifts open from the left but automatically refreshes the screen back to my homepage. So I can’t browse my website in full screen.
Do you know about this problem and what to do about it?
Hey Dennis, I wasn’t aware of that but I’ll check it out.
is this apple-mobile-web-app-title crawled by Google in SERP result or using normal meta title tag, i am facing issue in my website, in search result it using mobile meta tag.