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(and)i=COMR";
}
}
if (document.cookie.indexOf("iphone_redirect=false") == -1) {
window.location = "http://m.espn.go.com/wireless/?iphone(and)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();
}
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.
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
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.
<rel="apple-touch-icon" href="images/template/engage.png"/>
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.
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
-webkit-text-size-adjust:none;
}
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).
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);
}
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
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 */
}
/* 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.
@media screen and (max-device-width: 480px){
img{
max-width:100%;
height:auto;
}
}
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);
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.
<a href="tel:12345678900">Call me</a>
<a href="sms:12345678900">Send me a text</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);
}
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 */
}
/* whatever your hover effect is */
}
Jaanuki
Posted 199 days ago.Omar .. Its not that hard to order it online i beevlie!!also put in mind that US store is going to release it without contract in November .. i think its going to be unlocked []omarker Reply:November 1st, 2011 at 3:26 pmWell i Got mine ,, but good advice for people Who wanna have it ,, thanks =D[]
health option one
Posted 217 days ago.What`s up, I check your blog daily. Your story-telling style is witty, keep doing what you`re doing!
Apple iPhone warranty check
Posted 217 days ago.Having read this I thought it was extremely informative.
I appreciate you finding the time and energy to put this content together.
I once again find myself spending a significant
amount of time both reading and commenting. But so what, it was
still worthwhile!
I appreciate you finding the time and energy to put this content together.
I once again find myself spending a significant
amount of time both reading and commenting. But so what, it was
still worthwhile!
guild wars 2 gold
Posted 220 days ago.Wow, fantastic blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, as well as the content!
apple news
Posted 301 days ago.Having read this I thought it was rather informative. I appreciate you
finding the time and effort to put this
article together. I once again find myself personally spending a significant amount of time both reading and leaving comments.
But so what, it was still worth it!
finding the time and effort to put this
article together. I once again find myself personally spending a significant amount of time both reading and leaving comments.
But so what, it was still worth it!
Camilla PAtruno
Posted 360 days ago.I usually do not leave many comments, but after browsing through a few of the remarks on this
page Develop iPhone friendly websites - TutorialsWindow. I actually do have a few questions for you if it`s okay. Is it just me or does it look like like a few of these remarks appear like they are written by brain dead folks? :-P And, if you are posting at other places, I`d like to follow everything new you have to post. Would you post a list of the complete urls of your public pages like your linkedin profile, Facebook page or twitter feed?
page Develop iPhone friendly websites - TutorialsWindow. I actually do have a few questions for you if it`s okay. Is it just me or does it look like like a few of these remarks appear like they are written by brain dead folks? :-P And, if you are posting at other places, I`d like to follow everything new you have to post. Would you post a list of the complete urls of your public pages like your linkedin profile, Facebook page or twitter feed?
Csabi
Posted 360 days ago.The author of this tutorial is designstutorial
But all the information about the author is right above the comments section...
designstutorial has provided his twitter profile, too...
But all the information about the author is right above the comments section...
designstutorial has provided his twitter profile, too...
8 comments so far:
LEAVE A COMMENT