I realised that my noughts and crosses jQuery implementation has a hidden bonus feature! I wrote it so that it would look different on a desktop to on an iPhone, with a different stylesheet depending on the screen size of your device. This has the effect of making a simple website look and behave like a real iPhone app, and you can even get an icon for it on your home screen! It also gets the ‘wow’ factor of being able to run something on an iPhone without having to faff about with Objective C, pay Apple lots of money or upload to the App store. This might also be useful for teachers who are tasked with making their school’s website – how impressed would SMT be if you could tell them there was a mobile version, and all you actually had to do was add a second stylesheet? 🙂
1. In the <head> section of your site, add the following code:
<meta name="viewport" content="user-scalable=no, width=device-width" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> <link rel="apple-touch-startup-image" href="images/noughtscrosses.png" /> <link rel="stylesheet" href="iphone.css" type="text/css" media="only screen and (max-width: 480px)" /> <link rel="stylesheet" href="desktop.css" type="text/css" media="screen and (min-width: 481px)" />
These tags tell the page that you want to control how it is viewed if it is on an iPhone. The status bar style (black) is the small bar right at the top of the screen. The ability to set an apple-touch-icon is pretty cool. If your web page is viewed on an iphone, the user can choose to “add it to the home screen”, which is essentially adding a short cut to the web page. However, it LOOKS like a real app, and you can even use your own icon!
…and you get your icon appearing on your home screen like my noughts and crosses app like this! (The O’s X’s is the title attribute of the HTML page).
The apple-touch-startup-image is another thing you can customise. When you load your web page by clicking on the icon you just created, you can specify a startup screen that will display before the content has loaded.
2. Set up two separate stylesheets, one for iPhone and one for everything else
You’ll notice that I have two stylesheet links, iphone.css is used for a screen 480px wide or less (iPhone), and desktop.css is shown for any screen size over 480px. You can see my CSS code for the noughts and crosses app if you scroll down to the bottom.
Here is what my noughts and crosses game looks like on a desktop browser (Google Chrome, to be precise), and on Safari for iPhone.
The underlying jQuery and HTML code is IDENTICAL, it’s only the stylesheet which changes, so all you have to do is alter your CSS to make things look pretty on a small screen.
Google Chrome on a desktop:
Safari on an iPhone:
Two cool time saving tips:
1. If you don’t have an iPhone, you can download Safari for your desktop and ask it to emulate Safari for iPhone, even on Windows!
2. If you don’t have a live web server to upload things to so that you can see them, and you are at home, download XAMPP and run a local server. Assuming your iPhone is connected to the same LAN, you will be able to look at localhost pages just as you would on your desktop computer.