How to create CSS for an existing web application that now is used in a Kiosk with touch screen

i have to adapt an existing web application for use in a kiosk that provides only a touch screen. The application is based on p开发者_开发技巧hp-jquery and i have to diversificate some html elements (created by php) and CSS for the touch screen interface.

How can i do that?Is there some specific directive in CSS for touch screen? (i'm not talking about mobile screens, the kiosk will have a normal resolution). Is there a way to make the php know that the user is using the touch screen (so that i can change html accordingly)?

And, last but not least, are there any consolidated best practices/guidelines for deveolping touch screen interfaces?

Thx in advance, hope this is not a duplicate of another question

There isn't a media type defined for kiosk type devices in the css spec. The closest is probably tv, but the kiosk browser will proably load the screen type anyway.

Could you detect the browser the kiosks are using and return a different style sheet?

This depends on your browser run on the Kiosks... for example if your running Opera they treats full screen as a different CSS media type. They call it Opera Show, and you can control it yourself easily:

@media projection { /* these rules only apply in full screen mode */ }

As a kiosk is normally run in full screen mode this would work for you.