Get 10 Free 
Advancing trends for the mobile web are slowly blurring the line between Internet websites and native applications. Lately there have been many updates to mobile operating systems and web browsers with more capable rendering engines. This means we can work openly with webkit CSS3 effects and even many bits of jQuery code.
However a lot of the customization for mobile web apps is done in the document header. Meta tags are slowly being recognized as the best way to push data out to many different mobile platforms. iOS has Mobile Safari and Android users are rendering on the Webkit or Gecko engines. But ideologies are simply not enough – and the fastest way to learn is by trying out some new code.
What Makes a Mobile Webapp?
If you write a typical HTML4/XHTML/HTML5 webpage it will render pretty well on mostly all the modern cell phones. However it will be displayed as a website where users can generally pinch and zoom into areas. This is perfectly acceptable for most instances, except for responsive websites and mobile web applications.
Additionally you need to offer your visitors a quick way to access your webapp. Mobile Safari is always an option – but what about launching from the homescreen? All of the App Store applications will launch from their home icon, and this is also possible inside a mobile web app. Although we can run through a few of the required tags first.
Device Viewport
Whether your layout is built flexible or hard-coded to a set width(ex: 320px for iPhone) does not ultimately matter. To generate a webapp view we need the meta viewport tag added in-between your website’s <head></head> section. This can setup any number of important options for how our webpage is rendered on a mobile screen.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
This example above should be perfect for any typical boilerplate application. It will set all the default views to 1.0 scale and the user cannot re-size any part of the site, although they can still scroll vertical and horizontal. Within the content attribute are many other values you can toy around with. The Mozilla dev team has written an article on the viewport tag with full explanations and a couple of examples.
If anything, it’s super important to set your width value the same as device-width. This will force the layout to adjust as your visitors may switch from portrait into landscape view. It’s also necessary if you’re running JavaScript which parses for the current window size.
Mobile Safari Tags
The Apple online documentation section has a piece for Safari mobile apps. This includes a reference to each of their proprietary meta tags and how they should be used on your website. But in truth there are really only 2 more aside from the viewport.
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
By setting the web-app-capable meta tag Safari can detect that your website is able to run as an application. So when users go to save your website onto their device it will launch without the URL bar or any other Safari trimmings.
If you are familiar with iOS apps you’ll also recognize the top bar section of the device screen. By default this is setup with a white/gray gradient, but you may also choose between black and black-translucent. Neither of these values should affect your webapp in any major way other than the color scheme for the top toolbar.
iOS App Icons
There are two important pieces you can mimic in relation to a native iOS app. The first is a home screen icon, and the second is a featured launch png image. The code is very sensitive and you’ll need to use these exact values for rel and sizes. Although feel free to rename your image files anything(or even .jpg should work fine).
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png"> <link rel="apple-touch-icon" href="/apple-touch-icon-57x57.png"> <link rel="apple-touch-startup-image" href="/splash-startup.png">
Although it isn’t stated outright the sizes variable only accepts these two values. 114px is for iPhone retina and 7px for iPad displays. As far as I know there is no new size value for iPad retina displays.
The startup splash image should be sized exactly 320×460 pixels. For some reason the Apple guidelines do not offer a retina version of this splash screen. I have tried setting sizes=”640×920″ and the whole splash image feature just stops working! So this attribute appears to be very touchy, and I’m hoping Apple will touch up some of these features soon.
Quirks with Internet Explorer
Internet Explorer has surprisingly been getting a lot better with web standards. The developers at Microsoft have been adapting with new Internet technologies both on desktop and with their mobile phones. Meta tags for setting the rendering engine are common – using the MS http-equiv value for example.
But a recent tag X-UA-Compatible had caught my attention. It’s useful for setting browser engines back to keep your current code backwards-compatible. This is usually the case the Internet Explorer, although in some cases you can reset an older IE to the latest version. That would be using this code below:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
There have been some validation issues when checking your code against an HTML/XHTML parser. I believe this tag is setup through Microsoft and has been slowly leaked throughout the mobile web. This is really a personal choice to work with or not. If you’d like to learn more check this MSDN Blog post regarding X-UA-Compat and pick up on the details of the syntax.
Other Important Tags
There are some other meta tags you do not need to include, but certainly wouldn’t hurt anything if you did. Unfortunately there are just so many standards it would be impossible to list all the options. But you may consider working with just a couple more tags.
<meta name="HandheldFriendly" content="true">
HandheldFriendly was originally created by Palm and BlackBerry devices for managing mobile websites. It is still somewhat useful although not exactly the highest market share among mobile devices. I’ve found a small blog post discussing this meta tag and the viewport content.
There is also mention of another tag called MobileOptimized. This was originally designed for mobile Internet Explorer and will be carried over for WMP. It’s also known as the meta layout tag from the Microsoft developer docs.
<meta name="MobileOptimized" content="width">
Note that “width” should be changed to whatever your natural display should be on Windows Mobile Phone. This can be tricky to setup, and it may be worthwhile to ignore this tag altogether. The suggested default is 240 pixels for tablet PC and mobile IE devices. But there are definitely other tags related to IE which serve a greater purpose.
Conclusion
I hope these tricky meta tags can be of use to any interested mobile web developers. iPhones and Android devices have changed the way we access the Internet and modern-era websites. And now webmasters are forced to adapt their layouts to suit a changing marketplace.
This is not an exhaustive list of mobile-based meta tags. But it does cover all of the big boys you’ll need in a typical webapp. This should get you started on the right path for mobile web dev, and you can even setup a blank HTML5 template with many of these meta tags initialized. If you have similar ideas or questions on the code please share with us in the post discussion area.
Related Topics
Top