Now I’m probably speaking for most people who own the lovely iPhone and when you decide to hop on your favourite website to find it’s not rendered for the iPhone screen? How annoying is that? I’d say very. So back on subject do you own a website of your own and haven’t made your site available for iPhone users? Then carry on reading as I’ll show you the most easiest way to make it compatible with the iPhone.
Before I continue I’m assuming you own a WordPress website and is hosted on your own server like InsanelyTech is, if so then let’s proceed! If not then you can use the code below other ways such as inserting into the html <head></head> tags, and if your more ahead of html and on it with PHP then just insert the code where the header starts on your script.
So let’s begin with the header code, this part is the vital bit where MobileSafari on the iPhone will see that it has code for it to be rendered for the iPhone screen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="keywords" content="....." />
<meta name="description" content="...." />
<title>iPhone site</title>
<link rel="stylesheet" type="text/css" media="all" href="...." />
<link rel="stylesheet" href="...." media="screen" />
<!-- iOS Dectection -->
<script type="text/javascript">
var isiPhone = navigator.userAgent.indexOf("iPhone") != -1 ;
var isiPod = navigator.userAgent.indexOf("iPod") != -1 ;
var isiPad = navigator.userAgent.indexOf("iPad") != -1 ;
if(isiPhone)
{
window.location = "http://m.yoursite.com";
}
else if(isiPod)
{
window.location = "http://m.yoursite.com";
}
else if(isiPad)
{
window.location = "http://m.yoursite.com/ipad/";
}
else
{
}
</script>
</head>
So basically all I’ve done here is added a little bit of JavaScript to do the detection part and redirect accordingly by device from iPhone/iPod Touch to iPad. Now with the iPad the view is obviously bigger as we already know so a little bit more work for the iPad, but on this article we’re not focusing on the iPad we want to make our site compatible for the iPhone & iPod Touch users for the time being as much as that sounds bad by shutting out iPad users is another story of it’s own and I’ll definitely cover it another tutorial if people request it.
Now all you need to do is add this bit of code in the header as above on the subdomain (index.php/index.html, etc):
<meta name="viewport" content="width=320,user-scalable=false" />
viewport is visual formatting model for visual media in CSS 2.1 specification, where it is a window or other viewing area on the screen through which users consult a document (mean part of the screen that you’re actually seeing). User agents may change the document’s layout when the viewport is resized. Other parameters applicable for viewport include initial-scale, user-scalable, minimum-scale and, maximum-scale where you can try to make your website fit into iPhone and BlackBerry view area. The example of usage:
<meta name="viewport" content="initial-scale=1.0" /> <meta name="viewport" content="user-scalable=false" /> <meta name="viewport" content="width=320,user-scalable=false" />
Once you’ve got that in place, just add a CSS stylesheet in the code and start designing your site for iPhone/iPod Touch users. My best advice is try your best to make it look & feel the same as the desktop version!
Thanks for reading, if you need any help with this or just have an opinion on it then be sure to comment below!
