Create an iPhone Optimised Website using jQTouch
Recently I have been digging deeper into the world of web development for mobile devices. In particular for mobile Safari which is the browser that the iPhone and iPod Touch uses. I have recently been working on a redesign of my main freelancing website and I’ve decided that I’d like an iPhone-friendly version and so I have chosen to create a tutorial out of developing my own iPhone optimized website.
This tutorial isn’t going to walk you through every single path you could take, but simply the path I decided to take. But it will give you a clearer insight on how to approach web development for Mobile Safari.
In this tutorial we’ll be using jQTouch which is a jQuery plugin for mobile web development on the iPhone and iPod Touch. You’ll be needing the framework so grab your copy here.
References for further reading will be posted at the bottom of this post.
So, get a webkit browser (Chrome/Safari) at the ready and your trusty iPhone or iPod Touch if you own one and get ready to create an iPhone optimised version of your website. Or in this case, my website.
The HTML Structure
Create a new HTML document (index.html) containing a simple HTML, Head, Body structure.
Add the following inside <head></head>.
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1 user-scalable=no,width = 320" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
This entry was posted on Monday, June 7th, 2010 at 09:00 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
19 Responses »
- JQtouch Tutorials: Getting Started | tutorials blogs
- Mobile Development Toolkit - Noupe Design Blog
Leave a Response
We do love friendly, well-constructed and respective comments. We do not love bitchy, stupid and disrespectful comments. Find something wrong in this post?, feel free to send us a note and we will fix the issue asap.