Recently, we had designed / developed a site for iPhone device. It’s a pretty simple thing to do, so let me share some tips with all you guys..
First, let’s figure out the “to do list” before starting the actual code..
- Code the CSS for iPhone in landscape and vertical mode (i.e. when you keep it straight and tilt it), the width of the screen area changes, so we will have to code our CSS accordingly.
- Some kind of JavaScript snippet which would detect the screen orientation (portrait or landscape) and change the CSS accordingly.
- Some kind of code snippet which would not allow the user to zoom the main web page and disable the auto resizing of the page. (iPhone generally auto resizes the web page when you view it)
- And finally, a script which would detect the iPhone / iPod touch device and redirect the user to the iPhone customized website / web page.
So now let’s move on to the coding part..
- Let’s divide the CSS in 3 chunks.. this is what I have done:
- main.css – It holds all the design elements, basically everything except the width of the whole layout.
- portrait.css – It holds width of the layout in portrait mode (In this case 320 pixels)
- landscape.css – It holds width of the layout in landscape mode. (In this case 480 pixels)
- Now it’s time for JavaScript snippet to detect the screen orientation and apply the CSS accordingly. Here is the JavaScript code which you can use. (Nah, it’s not written by us, you can find the same code freely available everywhere on the net)
function orient() { switch(window.orientation){ case 0: document.getElementById("iphone_css").href = "css/portrait.css"; break; case -90: document.getElementById("iphone_css").href = "css/landscape.css"; break; case 90: document.getElementById("iphone_css").href = "css/landscape.css"; break; } } window.onload = orient(); - After this, we will have to call this JavaScript function in the HTML file and also call portrait.css. (As our orient function will be called on the load of the body). Apart from this, we will also have to iPhone specific meta tag which will prevent zooming and fit the whole page in the screen width.Add the safari specific (iPhone uses Safari as web browser) meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
Above code will set the width to 320 when you are viewing the page in portrait and 480 if you are in landscape mode. The above code will also set the initial & maximum zoom to 1.0 i.e. actual size of the page. Alternatively, you can try putting user-scalable to 0 too. (I have not tried it but you can play around if you wish to, you can check the apple developer page with info on all the available tags here) Call the CSS file:
<link rel="styleSheet" href="css/portrait.css" type="text/css" media="screen" id="iphone_css" />
In the above code, if you notice, I have set the ID as iphone_css, orient function will replace href content of this ID based on the layout orientation. Call the function in the body tag:
<body onorientationchange="orient();">
Above code will call orient function on the change of orientation of the page.
- Now, after all these points, you will need to setup a script which will detect iPhone device and redirect to the iPhone specific website. Since, we work in PHP, so my code will be in PHP but you can write the code in any language, many people also use JavaScript for browser detection and redirection. I personally would suggest using server side language.
$agent = strpos($_SERVER['HTTP_USER_AGENT'],'iPhone'); if (($agent >0)) { header('Location:'iphone/'); }In above function, I am checking for the value iPhone in the user agent and if it’s found, I am redirecting the user to the folder called “iphone”
There might be other ways to achieve this and you can use whichever suits your needs.
So, finally with above 4 steps, you will have an iPhone ready site.. I hope it helps you 
Hey, nice tut. Thanks.
hey great tips..ive used this on a current project and it works great.
Im having one issue though that i could use help on.
When i go from portrait to landscape it works and reloads all styles, but when going back to portrait it seems to only load some of the styles. Actually it will flicker a complete reload then do a mashup. combining both css files almost.
If i refresh the page it fixes it.
anythoughts?
Hi Tony,
This looks to be issue with your Javascript, just check what CSS files have you set for the different modes.
Regards,
Deep
Hi,
thanks for the tips….
i have some doubts:
1. Can i use all the html tags while designing OR any restrictions are there ?
2. Regarding server scripting, i am using PHP, can i write the code same as i use to write for my websites which are not shown in iphone or do i need to do any thing else ? (I am designing site for iphone first time)
thanks in advance…
Regards,
Prasanth
Hi Prasanth,
Here are my replies:
——————-
1. Can i use all the html tags while designing OR any restrictions are there?
——————-
Yes, there is no restriction on the HTML tags.
——————-
2. Regarding server scripting, i am using PHP, can i write the code same as i use to write for my websites which are not shown in iphone or do i need to do any thing else ?
——————-
Yes, PHP is server side scripting, so, it doesn’t matter what language you use, the output needs to be in HTML that’s it.
Hi,
It helps me a lot, thanks…..
Is it possible to write the javascipt for lanscape mode in PHP and if so, what would i have to do to accomplish it?
You can include Javascript along with any coding language, I don’t think it’s related to server side language, it just needs HTML
Simply thought id let you know and sustain the good work