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.
|
1
|
<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.
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.
|
1
2
|
<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 more quires contact us