There's other ways to do this, and I'm not sure this is the best way,
but this is the way I accomplished it with the Refynr.com web app:
For the first 5 months of the life of Refynr, I've used only jQuery Mobile
for the interface (which worked quite well on desktop browsers, but
didn't look very good). There's too much extra white space, huge
buttons and fonts, etc. that are meant for mobile browsers, not
Chrome, Firefox, Safari, or especially IE 8-.
As a solo entrepreneur, for the longest time I didn't have time to do
much of anything about the desktop version, cuz it at least already
worked on desktops, and I had so much to do. So, I thought I should
probably work on a completely new Refynr design 2.0, specifically
for desktops. And that's exactly what most sites do (and probably should).
But I was just not finding the time necessary.
So, I decided to cheat a bit, and simply detect if the user is on a
mobile device, and then give the appropriate CSS (look ma,
no browser redirects!) for them:
- Custom tag to detect mobile ( included in onRequestStart() ):
- Custom tag with <head> tag for entire site:
- Then, it's just a matter of adding id and class attributes where
necessary to design the desktop version -
example: <div data-role="page" data-theme="#attributes.JQueryMobileTheme#" id="publicPage">
You can screenshots of the results so far here:
http://solowebstartup.com/newrefynr (more updates to come)
