Thanks, im sure I can use that for something.

How to detect ipod touch?

I would love to see an article about creating iPhone compatible sites that contain video.

Very nice. I was just about to fumble through this myself.

Great tutorial! Thanks for sharing. Is there a demo page where we can test this?

This detect is a god sent. I have been looking all over the interwebs for this and it was served to me on a silver platter right when i was going to give up.!!!

Thanks NETTUTS

Huh i forgot that you can use tags on wp…

Duh.

@Jeroen the iPhone and iPod Touch use the same OS so this will apply for both devices.

Thanks a lot for this! IF someone has an iPhone and I make a page using this tutorial, could you send me a picture of your iPhone with my site on it? (I don’t have one, and probably won’t get one)

Thanks for this sharing. useful article. As a web designer and owner of a web development company, this article used to upgrade my knowledge. Thanks lot
by
pkp

Really good intro – I’ve been interested in this for a while, seems like now’s a good time as any to start

This is fantastic…it’s a great service to offer if you’re a freelance designer/developer to say that you can create iPhone compatible websites (and others for that matter). Great tutorial!

What’s the DPI in PSD for iPhone? I thought it was 150 DPI? Please verify. Thanks!

Good tut, actually helpful and I hate to say this, but I’m obligated by my fans to say:

“Thaaaaannnnnkk God!!!! Yet ANOTHER cell phone tut! And here I thought you guys had given up on us after we didn’t learn how to make the world revolve around cellphones after the initial infinite tuts!!”

I think I love it ajajaja, Nice tutorial… First time i seen a tutorial for iphone and itouch!

I love Nettuts. I really do love Nettuts and the Envato family. Thank you for making my day!

Ahhhhh THANKS!
More of these!

Bookmarked for the future… I’m not normally in favor of user agent string sniffing but this seems to be a valid way of using it…

To be honest though, we, as web developers should never have to cater for a specific device. It’s against web standards and plain logic for us to recode websites just to suit new technology and gadget trends! I doubt I’ll put much effort into doing this – Is it really time-well-spent??

The iPhone And touch have seperate useragents though. It doesn’t detect my touch. …You could roll the iphone and touch js redirect files into one and point them both at the same place

Great tut. First one I’ve seen that addresses the horizontal display mode for your website! Finally! Thanks

Dan, RC did a tutorial for the iphone a few weeks ago on Layers Magazine TV. Great tutorial non the less

Yeah! I want my website to change colors when I view it in landscape! Haha, great article, I was thinking about doing this.

Holy COW! i really like this article you got here. i am having a mobile project just this week. and darn it is useful.

In javascript:

if ((navigator.userAgent.indexOf(’iPhone’) != -1 ) || (navigator.userAgent.indexOf(’iPod’) != -1)) {

For those interested in more information, you can check out http://developer.apple.com/iphone/.

Thanks for the tutorial.

I am a developer for the iPhone, i make rich apps on the iphone. I have a server side solution for to detect the iphone. Maybe i will post some of my stuff in here.

Interesting tut. It is a deviation from the stream of Wordpress tuts we had in the last little while. Thanks for all of your time and effort.

Nice thingy but i would have made it in php (so that it would work even if the visitor have disabled js).

It would look like that :

ouch, forgot that the php code is disabled in comment
ok
so again :

if (ereg(”iPod|iPhone|Aspen”, $_SERVER["HTTP_USER_AGENT"]))
{
echo ‘iphone/itouch/aspen’;
}
else
{
echo ‘not iphone/itouch/aspen’;
}

aspen is the name of the emulator of the iphone, with the sdk of apple

Nice and usefull tutorial. Tks lot.

@MGK: Tks for the tips: php user agent works fine.

Can you please explain the 2nd code listing? You say it´s “html conditional statements”. That is something I never heard of. I read about “MSIE html conditional comments” but the syntax is different. Can you please point me to some reference or demo where I can see these “html conditional statements” in action? It´s not included in the source_files.zip that you link to at the beginning of the article. Further you say “You can find the source psd files here or…” but there are no photoshop files included in that package.

Great article! I tried adding content dynamically using PHP/MySQL but it didn’t work. Before I get myself all crazy troubleshooting, does anything special have to be enabled to do this?

Thank you again for all of your hard work.

-John

@Anders Ringqvist

You will find the zip file containing the psd files for the portrait and landscape view of the page by clicking on my name to the left of this comment. As for the html conditional statements, they are widely used for Internet Explorer, but generally work for any type of conditional statement. In this case we are using html to check if the browser is the iphone browser.

A basic HTML conditional statement looks like this

This is typically not that very best way to do this though. Personally I would probably use php as MGK described above. I simply showed you a few different ways to accomplish this which are pretty simple. Hope that helps!

whats the difference with developing for iphone or ipod touch? just curious because i’m interested in developing apps however i dont want to switch my phone provider just to get the iphone. i figured the ipod touch would allow me to browse and develop iphone type apps.

had bad path – includes PHP np. Thanks again

usually i just do a alt stylesheet for iphone and that works just fine for me. But thats just my opinion

I’m a coldfusion programmer, so here is how i would detect the iPhone, iPod in Coldfusion.

You are viewing this page with an iPod Touch or other iPod device.

You are viewing this page with an iPhone.

You are viewing this page a PC/MAC.

The sometext could easily be changed to something like a cflocation to redirect users to a special iPhone page. the #CGI.HTTP_USER_AGENT# is the built variable to get the user agent of the browser. I have tested this code on an iPhone and iPod touch.

Enjoy.

oops — code got removed:


cfif #CGI.HTTP_USER_AGENT# CONTAINS "iPod">
You are viewing this page with an iPod Touch or other iPod device.
cfelseif #CGI.HTTP_USER_AGENT# CONTAINS "iPhone">
You are viewing this page with an iPhone.
cfelse>
You are viewing this page a PC/MAC.
/cfif>


Hi, good topic for a Tuturial.

Here is an alternative approach to switching between to separate Css files. It just adds a new ‘orient’ attribute to the Body tag. In your function orient():

function orient() { switch(window.orientation) {
case 0:
orient = “portrait”;
break;
case -90:
orient = “landscape”;
break;
case 90:
orient = “landscape”;
break;
case 180:
orient = “portrait”;
break;
}
document.body.setAttribute(”orient”, orient);
}

So you can use the Css that way:

body[orient="portrait"] {
background:#FF0000;
}
body[orient="landscape"] {
background:#000;
}

Also, the iPhone built-in Safari browser works with webkit. You can use the border-width and -webkit-border-image combo to stretch the middle part of an image and keep the left and right side intact.

Example in your code:
#content {
border-width: 0 25px 0 25px;
-webkit-border-image: url(middle.jpg) 0 15 0 25;
}

#bottom {
border-width: 10px 25px 0 25px;
-webkit-border-image: url(bottom_corners.jpg) 0 25 0 25;
height:31px; }

So you don’t have to maintain two sets of images/css files for ‘Portrait’ of ‘Landscape’ mode.

Ok webkit things and ‘orient’ attributes added to the Body are not web standard approaches, but we are talking about iPhone here, no really need of accessibility

Last point, your browser detection doesn’t take care about iPod touch which provides a different User Agent. Something like that should detect an iPod Touch properly:

Chapter Getting Started, Line 03:
var users_browser = ( browser.indexOf(’iPhone’)!=-1 || browser.indexOf(’iPod’)!=-1 );

Regards,
Jay

Thanks, great tutorial. Useful.

posting a nightly or quick tips article on how to detect different type of mobile / mobile browser would be a nice idea.

This is awesome dude! Thanks! Will definitely be using this sometime!

great tutorial. i’m looking to get an ipod touch soon, so i’ll be looking to make good use of something like this. might come in handy for future web app building too!

Thanks a lot ! I didn’t know where to start and it really helped.

Nice tutotial, if it worked. I’m a experienced webdesigner/coder for a few years now and I did everything you wrote, but guess what, it doesn’t work at all.

Why don’t you offer a downloadable example?

im not having any luck with this, and why isn’t there an demo? any help would be great.

This is an awesome tutorial. I have been looking for a tutorial like this for the longest time. I actually found this site on http://www.iphonedevver.com which is an iPhone SDK tutorial search site.

These two lines contradict each other:

# var browser=navigator.userAgent.toLowerCase();
# var users_browser = ((browser.indexOf(’iPhone’)!=-1);

It should either be

# var browser=navigator.userAgent.toLowerCase();
# var users_browser = ((browser.indexOf(’iphone’)!=-1);

or

# var browser=navigator.userAgent;
# var users_browser = ((browser.indexOf(’iPhone’)!=-1);

This is because the indexOf() statement IS case sensitive.

Why not just use a CSS media type to send iPhone to its special stylesheet?

I’m sorry I dont get it working, where doo you have to put this script???
I tried lots of things but it doesn’t work:S and is this java or some other type of script??

srry this script:

# <!–#if expr="(${HTTP_USER_AGENT} = /iPhone/)"–>
#
# <!–
# place iPhone code in here
# –>
#
# <!–#else –>
#
# <!–
# place standard code to be used by non iphone browser.
# –>
# <!–#endif –>

Got a question about the iPhone? Ask away. Think you can Answer any question about the iPhone?? Lets see. http://www.iPhoneAnswers.org

Thanks for this article! I’m actually just getting into iPhone-optimized web site design more deeply and this article is very useful.

I wrote some very lightweight JavaScript and PHP code for web site owners to detect mobile devices. The code is available for free download!

- JavaScript: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

- PHP Code: http://www.hand-interactive.com/resources/detect-mobile-php.htm

Download the code and follow the simple instructions. You can detect as broadly (Is this a smartphone class device?) or as narrowly (Is this an iPod Touch?) as you need.

So take a look at the code and see if it helps you better meet the needs of your web site visitors!

Cheers,
Anthony Hand
Mobile User Experience Designer

thanks dude, used your css with my home security/monitoring system. looks great on my iphone now

This articles is very useful! I have tried it on my Iphone and the site fits well!

One can test thr sites on http://iphonetester.com/

Can you incorporate wordpress or some kind of blogging feature with this?

excellent!!

thanks , this is a very good tutorial.

Thanks, It’s really nice informative post. I was looking for the same

This is great but how do you create sliding pages. or links to secondarypages?

how to detct touch for zoom in or zoom out?

great article, hanks

thanks for this tutorial, but I am looking for a somthing which can load a new HTML document after rotate iphone, so it will work on the same idea as above but change the filepath not the css style document.

Anyone has an idea?

Thanks a lot.

I have my page done, on the page is a link to call a phone #. This works fine unless you are on an iPod Touch. what code can I add to make a dialogue box pop up telling the user that they are on an iPod and not an iPhone? Here is what i have so far:

#

Thanks!

Hello Thank you for this website! Here is mine http://motrin.wikidot.com/

For some reason I cannot get the redirect to work. I copied and pasted your code at the beginning and it’s not working. Am I missing something here? Also, do I need to put the detection code within the conditional statements? Or is that optional?

Thanks for the post, I have been roaming web for this tutorial. thanks a million again.

The redirect is not working for me either!
dreamweaver is telling me i’ve got a syntax error in this line

var users_browser = ((browser.indexOf(’iphone’)!=-1);

I’ve tried every other syntax… is this the problem?

know what? It didn’t help me. I was looking for a solution where the iphone load different css on each portrait (portrait and landscape) it didnt load the css on the fly (tilt) it needs a refresh.

But “Jay Salvat” solution just works fine. Thanks for the tutorial.

on http://www.testiphone.com/ your demo has a problem
the pic is at http://hi.baidu.com/zjm1126/album/item/0df431d4ef85642da08bb72a.html

Interesting, i am currently writing a system that needs to detect whether is an iphone or uses wap and send the user to the appropriate page. We are developing interactive novels for mobile phones in the UK. Check our site: http://www.mifiction.co.uk, we go live in febuary next year