Designing websites for iPhones
Today I have been learning how to build an alternate page, website and style sheet for the iPhone and iTouch. I found some great iPhone website tutorials on the web so I decided to put my own tidy twist on it… First I learnt we need to assign the iPhone browser type:
var browser=navigator.userAgent.toLowerCase();
var users_browser = ((browser.indexOf(‘iPhone’)!=-1);
if (users_browser)
{
document.location.href=’www.tidydesign.com/iPhone’;
}
</script>
Then we will need to use a conditional statement to hide the code from a regular browser such as IE or Firefox:
<!–
place iPhone code from above in here
–>
<!–#else –>
<!–
place standard code to be used by non iphone browser.
–>
<!–#endif –>
The above should now detect what browser is being used to view your webpage, we can therefore refer the viewer to a /iPhone directory which contains a site specifically designed for this mobile device. I have come across some very interesting information today about iPhones and portrait / landscape CSS files that link to window orientation! Over the next few days I will be post some more info about this.
