Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In this example, we are going to see how to create a full-screen web app on iOS devices. By doing this, you can make a web page look and act like a native application because the page can use the full-screen real estate available to it and hide the browser chrome. So it will hide the address bar, it will hide the status bar, and use the entire page, and look like a native, built-in application. You can also do some really cool things, like specify start-up images, sometimes called splash screens. So when user is starting up your web page it will show this graphic to the user, again giving it more of a native application kind of feel.
You can also specify the icons that will represent the app on the device's home screen if the user pins your application to the home screen. So you can customize how that looks. So the way that you do this is by specifying certain tags that the iPhone and other iOS devices will recognize that indicate that this particular web page, or collection of web pages, are capable of running in the full-screen mode. The first of these is the apple-mobile- web-app-capable meta tag and if you set the content tag to true then that tell the iOS device that this web page should be run in full-screen mode and is capable of looking like a native web app.
The second one is the apple-mobile-web- app-status-bar-style and if you set the content of that to black, that will hide the status bar and give your web app page access to the full screen. The next one is a link tag which has a rel attribute which is set to the value of apple-touch-startup-image, and you give the path to the image you want in the href attribute. And this image has to be 320x460 pixels in portrait mode, and if it fits those dimensions and you specify the path here then the iOS device will use this image as the startup image while your page is loading.
Alternatively, you can use a file named apple-touch-icon-precomposed. And the main difference between these two files is that if you use the apple-touch-icon name then when the icon is displayed on the home screen, the iOS device will sort of enhance the icon a little bit. It will give it a glossy look. It will round the edges a little bit. It will perform some enhancements on the icon that you provide. If you don't want that to happen then you add the precomposed keywords to the file name and the device will just leave the icon alone and use it as you've designed it.
The second option is to specify an icon for a particular page. And this will override any icon that you specified using option one, and that is to use a link tag with a rel attribute of apple-touch-icon and the href set to the path to the icon that you want to use for this particular page. So if you do this and you have an apple-touch-icon or precomposed one at the root of the site, like you have an option one there, then it will override the icon that you specified using that option.
So let's see how this works in real code. I am going to switch over to Xcode, and you can see here that I've got my ExampleSnippets file open, and I am going to scroll down to the Creating Full-Screen Web Apps section, and I am going to go over to my fullscreen_start example file. What we are going to do is you can see that this is the page that we are going to use as the full-screen example. It's a very simple page. It just has a title and some text in it. So let's go back to the snippets, and I am going to copy these tags.
So I'll copy these, and I'll paste them into my fullscreen_start here. So you can see here that I've specified a viewport tag with the width equal to device-width, setting user-scalable to no, and the initial-scale to 1.0. I have my apple-mobile-web-app-capable tag and the content is set to yes. I've got my apple-mobile-web-app-status- bar-style and the content is to black. So that's going to tell the iPhone simulator to give me control of full screen. And I've got an apple-touch-icon specified to the icon contained in the images folder for myappicon, and I've got the apple-touch-startup-image set to startup image.
So now I am going to save this. Saved. And let's go back to the finder. So I am going to copy my fullscreen_start file, and I am going to copy that, and I am going to go to the folder over here, and I am going to go ahead and paste that. And we'll repaste it. Now let's go to the simulator, and we are going to fire up Safari, and we are going to send Safari to localhost.
So when we load the page in the browser you can see that I still have the chrome here and I've got the status bar down here. So what I am going to do is click on the Add to Home Screen, and you can see that here's my little custom icon. And because I am not using the precomposed version, it's putting this little glossy effect on here. And I am going to go ahead and add an extra p, and I am going to click Add. So when I click that you can see that my icon has now been added to the iPhone's home screen.
And when I click on this you can that there is my startup page image, and then here is my full-screen app. It's now running in full-screen mode. You see that the URL bar is gone, the address bar is gone, and the experience that the user is getting is that this looks like a native, built-in application. So just by specifying those meta tags and link tags, you can give your web pages a native app look and feel on the iPhone.
Get unlimited access to all courses for just $25/month.Become a member