I got inspired and wanted to finish up the iphone version of my website. To do this, first you need to detect the iphone and then redirect the user to another webpage. Here is the script to do that:
1 2 3 4 5 | <script type="text/javascript">// <![CDATA[ if ((navigator.userAgent.indexOf('/iPhone/i') != -1) || (navigator.userAgent.indexOf('/iPod/i') != -1)) { document.location = "http://www.scottrockers.com/iphone.html"; } // ]]></script> |
Add this Javascript inside your <head> tags. and change the document.location to the page you want the user to get redirected to. The reason I have a iPhone version of my website is because my home page is made in Flash and as you know the iPhone can’t display Flash yet. So I created a basic html page that has a div in the body of it that is sized to 300 width by 350 height. And if you put this line of script in the <head> section it will tell Safari that the viewport should be the same size as the iPhone screen. Setting this line of code forces the content to always fit the window.
1 | <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"> |
Now, if someone wants to bookmark your website, they can hit the + sign and then click “Add to Home Screen” and you want to specify what icon to use for the iPhone, then create a 57px by 57px .png formatted image, put it up on your server and put this line of code in to your <head> section as well.
1 | <link rel="apple-touch-icon" href="http://www.scottrockers.com/library/images/sriphonelogo.png"/> |
Just make sure the href tag is the correct destination to your image. What is cool is that you don’t have to add the corners or shine effect on the webclip because the iPhone will do that for you.
If you want to see all the actual html code, you can just go to scottrockers.com iPhone Version and click view source.
Cya
