iPhone Web App Development

I have been working through a tutorial that Jonathan Stark put together that explains how to customize a web page for an iPhone. The beauty of this solution is that the site will function and display normally for anyone accessing it with a desktop browser but for someone on an iPhone or and iPod Touch the experience will be customized. This is made possible by CSS (using some WebKit) and JavaScript (using some JQuery).

Here is my Index page of iPhone Web Apps. Note: you need to access this with Safari Mobile to see the cool iPhone App look.

iPhone Dev Websites

A blog discussing best practices in general for web development. It also has some good points about using special css for people accessing the site via iPhone.

knol.google.com

----------------------------

Here is some good documentation from apple about how to configure the view port on the iPhone. Safari looks for a meta tag to set the view port.
<

meta name = "viewport" content = "width = device-width">

developer.apple.com

----------------------------

Here are some suggestions for working with css on an iphone.

eisabainyo.net

----------------------------

This web page displays a bunch of different components that display differently with browsers that use webkit vs non webkit browsers. It give an example as well as some instruction on how to code for it.

lipidity.com

----------------------------

iUI is a framework for developing web applications for the iPhone that look like native apps. It uses JavaScript and CSS as the framework.

code.google.com

JavaScript iPhone Web App

We wrote our first iPhone web app in class on Thursday. It was a simple app that utilized JavaScript to register which way the iPhone was oriented. We the iPhone was turned to the right or the left the accelerometer registered the change and the text on the page was updated to show which way the screen was oriented.

I added a few lines of JavaScript to have the screen display when ever the page is first loaded. That way the user doesn't have to turn the phone to get the orientation to register.

Here is the JavaScript code to make it work: