comprar viagra online
comprar viagra generico barato
comprar cialis generico online
comprar cialis online seguro
Build native-looking apps for iOS |
Lately, I've been messing around with cool HTML5 stuff a lot. One of the things that HTML5 is trying to reach, is the market of mobile devices. A long time ago (when I got my first iPhone), I wrote an article on how to add a webclip for easy access to your website. But since then, I've learned a couple of more things on how to build native-looking apps for iOS using only HTML. I've created a template/boilerplate that you can use for your next project to create native looking apps for iOS (more specifically: Mobile Safari) using nothing but HTML. Simply build your website starting with this template, bookmark it and you're done. View or download the source code and read the comments carefully to see what's needed to create a native looking app using only HTML. If you don't feel like fully digging into the source, but learn the pieces bit by bit, feel free to read on further. Take note that this will only work when the user bookmarks your webpage. The changes to any existing projects can be made easily, just make the following changes in the Set the viewport First, we'll need to provide the browser more information about how the webpage should be displayed. This will ensure the application is rendered properly and not scaled when rotating/zooming. To do this, we need to set the <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/> You'll have to keep in mind that your user can now not scale anything on your site anymore. Make your font/links/buttons etc. big enough for him to actually read or press. Make it fullscreen Sadly, you can't make a HTML application go truly fullscreen (something which a native application can do). You can almost achieve this effect by hiding the browser URL bar (top) and the navigation bar (bottom). Both so-called Safari-bars can be hidden using the following code: <meta name="apple-mobile-web-app-capable" content="yes" /> Pretty cool! When you now bookmark the page, it'll (almost) not look like as if you're visiting a website, but using a real app. But there's more we can do! Change the status bar style With HTML, you even get the power to change the status bar style of the iOS device. The status bar is the bar totally on top of the device, which is always visible and contains information about your carrier, battery life etc. We can change this by adding the following line: <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> Valid values for Add a Home icon The Home icon (also known as webclip, Springboard icon or Apple Touch Icon) can also be controlled using HTML. This is the kind of icon will see on their home screen in order to start the application. It's pretty easy to create one yourself, but there are a couple of things you have to keep in mind. By default, Mobile Safari searches for a file named <link rel="apple-touch-icon" href="images/apple-touch-icon.png" /> Using my template, the result will look like this: If you don't want the glossy finish, use That looks great for making your app look even more like a native app. But, we can do even more stuff. Add a startup image You can even add a startup image (also known as a splash screen) to your HTML application, to show to the user while the application loads. This is the one that I'm using in my template: Take note this file exactly needs to be 320x460 for iPhone/iPod or 1004x768 for iPad, and is a PNG file. Also, this only works if Block rubber banding Rubber banding (also known as elastic scroll) is the effect you see when you pull down/push up the page, see a grey area (which indicates the bottom of the page) and flicks back. In most native applications, this is something you don't see and that's why we want to prevent it. Take note, by using this code, the user can't scroll on your page anymore. <head> <script> function BlockElasticScroll(event) { event.preventDefault(); } </script> </head> <body ontouchmove="BlockElasticScroll(event);"> </body> Sadly, this solution isn't fully waterproof (sometimes, it doesn't work). For a more solid solution, check out ScrollFix. Javascript In JavaScript, you can use var isIPhone = navigator.userAgent.indexOf("iPhone") != -1 ; var isIPod = navigator.userAgent.indexOf("iPod") != -1 ; var isIPad = navigator.userAgent.indexOf("iPad") != -1 ; var isIOs = isIPhone || isIPod || isIPad ; Conclusion This template can really help you make your HTML app give a more native app iOS look and feel. It's great that the same code works for the iPhone/iPod (only the iPad has some sizing issues with the startup image). You can use JavaScript to give feedback to the user that they should bookmark your application once they visit your website to get the whole experience! Later on, you could add a manifest file to take your application offline to use your application even when you don't have an active internet connection! I might cover that in another tutorial later. Did I miss anything? Do you have more tips you want to share? Feel free to do! Tags: ios iphone ipad native html Interested in this topic? You might enjoy another article I've written called |
Next > |
---|
Search |
---|
Or try the sitemap |