I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).

Now that works fine if you're on a a desktop/laptop puter. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.

What are methods and techniques where a website can detect if a visitor es from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?

I'm the processing of redesigning a website that uses hover effect on a button (like button images changes when you put your mouse over it and when you click it, it goes to a different page).

Now that works fine if you're on a a desktop/laptop puter. But on a tablet, the hover/onmouseover effect does not work. On a tablet, when clicking the button image, it changes briefly and then immediately goes to a new page.

What are methods and techniques where a website can detect if a visitor es from a tablet or not? Then would it be possible to switch to a tablet CSS version? Or, are there tablet framework (i.e. Modernizer?) that can help with this process?

• javascript
• css
• tablet

2 Answers 2

Touch devices don't have a hover event and there is no way to emulate the user interaction that might initiate it. Make sure that there is no critical functionality assocaited with hover events (most just do highlighting) so there is no loss of functionality if the device doesn't have it. Browser sniffing by UA string is a flawed strategy - you must update it every time a new device es along or the string changes for an existing device. Great if you're into high prices for maintenance, but not if you're the one paying for it.

You could identify the iPad (or mobile device) simply by checking the User-Agent parameter of the browser.

In PHP for example you could do something like:

if( strstr($_SERVER['HTTP_USER_AGENT'],'iPad') ) { // Add custom iPad CSS }

If you want to get it further you could use WURFL (http://wurfl.sourceforge/)