I'm developing a web app, with a full ajax ui using html, css and jquery as the js framework. All pages are developed for PC, but there are some pages that should work fine on Handheld (windows ce) as well. Along with css changes to make those pages compatible with handheld devices, there are little operational differences in js. i.e user does not select dates in handheld whilst they can on pc.
The question is, have can I make different pages for the handheld version? How can I develop compatible and ready pages only by applying another css file? Does @media help? Should i use jquery mobile? Can I detect the device using js and switch the css and some logic?
You should be able to use pure CSS and the
mediaattribute of the<link>tag to control which stylesheet is loaded. This guy seems to have some nice cross-browser markup that will get you started.Alternatively/additionally, consider using Modernizr to add classes to your root
<html>node that tell you a lot of information about the capabilities of a user. Then you can do simple tests in Javascript to enable or disable certain features if certain functionality isn't present.