I understand that there are some special CSS properties.

Obviously a:hover wouldn't work (your finger is not a cursor )

How many people have had experience with iPhone optimized sites
and how did it work out?

Some of the events are different, as you've noticed. You can used the compatibility guide at quirksmode.org: http://www.quirksmode.org/compatibility.html <-- he includes the iPhone in his tables.

I've only done one mobile site. Mostly it just came down to making everything smaller. Fortunately some people have worked out mobile browser detection ahead of time, so you'll know when to redirect to the smaller site: http://detectmobilebrowser.com/

Interesting because I thought that browser "sniffing" was frowned upon.

In fact I think in jQuery 1.4 the $.browser property has even been deprecated.

Personally I think its a shame because sometimes Javascript can be the only tool available.
Like trying to distinguish Chrome 4 and Safari 4 for example.
I am yet to find a pure CSS hack that does that.

Well, there's no way around it, you'll need to browser sniff if you're going to detect mobile. If you're ONLY going to target the iPhone, maybe there's a way around it, but since it is technically Safari, and follows almost all of the same rules, there's probably not.

Browser sniffing is only frowned on in JavaScript development because it is supposed to be better to do feature testing when implementing certain code, such as using document.querySelectorAll only on browsers that support it. Feature testing is a more flexible approach because it doesn't rely on knowing every possibility that is out there. If you need to change your entire website because you're serving to mobile, browser sniffing is definitely the way to go, especially since some people have worked out a majority of the possibilities ahead of time, but it will probably need to be updated as more mobile browsers are pumped in the system.

Browser sniffing is usually done from the server anyway, not with JavaScript.

Originally Posted by wayfarer07

Browser sniffing is usually done from the server anyway, not with JavaScript.

Really?
Is there a PHP function for detecting the user agent? I've never heard of it.

PHP Code:


$_SERVER["HTTP_USER_AGENT"] 


Contains the same user agent string that JavaScript reads. This information is sent in headers to the server before any output is sent to the browser.

Interesting!
http://php.net/manual/en/function.get-browser.php

I wonder whether it can detect the difference between Safari and Chrome though
since they run basically the same rendering engine.

Look forward to trying it out soon anyway, thanks again!

Safari and Chrome have slightly different user_agent strings, so sure.

http://www.useragentstring.com/

http://www.useragentstring.com/pages...gentstring.php