// From me and http://www.catswhocode.com/blog/10-useful-code-snippets-to-develop-iphone-friendly-websites
// Detect iPhone & iPod using Javascript
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone&i=COMR";
}
}
// Detect iPhones & iPods using PHP
if(strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod')) {
header('Location: http://yoursite.com/iphone');
exit();
}
// Set iPhone width as the viewport
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
// iPhone specific icon
<!--Make a 57px x 57px png image & put it in your root directory w/ the name "iphone-icon.png.-->
<!--With Gloss Effect-->
<link rel="apple-touch-icon" href="iphone-icon.png"/>
<!--Without Gloss Effect-->
<link rel="apple-touch-icon-precomposed" href="icon" />
// Detect iPhone orientation
window.onload = function initialLoad() {
updateOrientation();
}
function updateOrientation(){
var contentType = "show_";
switch(window.orientation){
case 0:
contentType += "normal";
break;
case -90:
contentType += "right";
break;
case 90:
contentType += "left";
break;
case 180:
contentType += "flipped";
break;
}
document.getElementById("page_wrapper").setAttribute("class", contentType);
}
// Apply CSS styles to iPhones/iPods only
@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */
}
// Automatically re-size images for iPhones
@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}
// Hide toolbar by default
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);
// Make use of special links
<a href="tel:12345678900">Call me</a> // Brings up dialer
<a href="sms:12345678900">Send me a text</a> // Brings up txt