10+ useful code snippets to develop iPhone friendly websites
When developing websites, you have to care about different browsers, as well as mobile devices such as iPhones or iPods. In this article, let’s have a look at the 10+ most useful code snippets (Javascript, PHP, CSS, etc) for developing iPhone friendly websites, quickly and efficiently.
Detect iPhones and iPods using Javascript
When developing for the iPhone and the iPod Touch, the first thing we have to do is obviously detect it, so we can apply specific code or styles to it. The following code snippets will detect iPhones and iPods using Javascript, and redirect those users to an iPhone specific page.
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 and iPods using PHP
Although the previous snippet works great, Javascript can be disabled on the iPhone. For this reason, you may prefer to use PHP in order to detect iPhones and iPods touch.
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
How many times did you load a website in your iPhone and it just looked like a thumbnail? The reason of this is that the developer forgot to define the viewport (or didn’t know it existed). The width=device-width statement allows you to define the document width as being the same than the width of the iPhone screen. The two other statements are preventing the page from being scaled, which is useful if you’re developing an iPhone-only website. Otherwise, you can remove those statements.
Defining a viewport is easy: Just insert the following meta in the head section of your html document.
Defining a viewport is easy: Just insert the following meta in the head section of your html document.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
Source:http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Insert an iPhone specific icon
When a user adds your page to the home screen, the iPhone will automatically use a screenshot of your website as an icon. But you can provide your own icon, which is definitely better.
Defining a custom iPhone icon is easy: Simply paste the following in the head section of your html document. The image should be 57px by 57px in .png format. You do not need to add the shine or corners, as the iPhone will do that for you automatically.
Defining a custom iPhone icon is easy: Simply paste the following in the head section of your html document. The image should be 57px by 57px in .png format. You do not need to add the shine or corners, as the iPhone will do that for you automatically.
<rel="apple-touch-icon" href="images/template/engage.png"/>
Source:http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Prevent Safari from adjusting text size on rotate
When you rotate the iPhone, Safari adjust text size. If for some reason you’d like to prevent this effect, simply use the following CSS declaration. It has to be inserted in your CSS file.
The -webkit-text-size-adjust is a webkit-only CSS property that allow you to control text adjustment.
The -webkit-text-size-adjust is a webkit-only CSS property that allow you to control text adjustment.
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}Source:http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Detect iPhone orientation
Due to the fact that the iPhone allow its users to view a page in both portrait and landscape modes, you may need to be able to detect in which mode the document is being read.
This handy javascript function will detect the current iPhone orientation and will apply a specific CSS class so you can style it your way. Note that in this example, the CSS class is added to the page_wrapper ID. Replace it by the desired ID name (See line 24).
This handy javascript function will detect the current iPhone orientation and will apply a specific CSS class so you can style it your way. Note that in this example, the CSS class is added to the page_wrapper ID. Replace it by the desired ID name (See line 24).
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);
}Source:http://www.engageinteractive.co.uk/blog/2008/06/19/tutorial-building-a-website-for-the-iphone/
Apply CSS styles to iPhones/iPods only
Browser sniffing can be useful, but for many reasons it isn’t the best practice to detect a browser. If you’re looking for a cleaner way to apply CSS styles to the iPhone only, you should use th following. It has to be pasted on your regular CSS file.
@media screen and (max-device-width: 480px){
/* All iPhone only CSS goes here */
}Automatically re-size images for iPhones
On recent websites, most images are above 480 pixels wide. Due to the iPhone small size, there’s a strong chance that images will break out of the wrapper area.
Using the following CSS code, you’ll be able to automatically re-size the website images to 100%. As the device max width is 480px, images will never be wider.
Using the following CSS code, you’ll be able to automatically re-size the website images to 100%. As the device max width is 480px, images will never be wider.
@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}Hide toolbar by default
On a small screen such as the iPhone screen, a toolbar is useful but also wastes a lot of space. If you’d like to hide Safari toolbar by default when an iPhone visitor open your website, just implement the following javascript code.
window.addEventListener('load', function() {
setTimeout(scrollTo, 0, 0, 1);
}, false);Make use of special links
Do you remember those “mailto” link that were very popular some years ago? This prefix automatically open the default email client used by the person who clicked on it. The iPhone has introduced two similar prefixes, tel and sms, which allows the person who clicked on it to phone or text automatically.
I’m definitely not a fan of those, but maybe that will be useful to you. The only thing you have to do to implement this, is to paste the following anywhere on your html page.
I’m definitely not a fan of those, but maybe that will be useful to you. The only thing you have to do to implement this, is to paste the following anywhere on your html page.
<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</a>
Simulate :hover pseudo class
As no one is using a mouse on the iPhone, the :hover CSS pseudo class isn’t used. Though, using some Javascript you can simulate the :hover pseudo class when the user will have his finger on a link.
var myLinks = document.getElementsByTagName('a');
for(var i = 0; i < myLinks.length; i++){
myLinks[i].addEventListener('touchstart', function(){this.className = "hover";}, false);
myLinks[i].addEventListener('touchend', function(){this.className = "";}, false);
}Once you added the code above to your document, you can start css styling:
a:hover, a.hover {
/* whatever your hover effect is */
}
