Can a jquery mobile site be a desktop browser site as well?

Question

I've built a simple little jquery mobile site, but I also need a very similar site for browser-based traffic. In fact, for the moment, the sites are exactly the same, except that I need to limit the width of the in-browser site to 650px or so.

Is there a simple way to do this? It would save me many hours of development time.

Also, looking forward, it would be super helpful to work from a single, common base of code for the mobile and browser-based sites, with only the differences maintained separately. Is there a framework or approach that can help me keep my code DRY?

Note: I'm aware of this question, but it's slightly different, asking if jquery mobile can be used for desktop instead of mobile. I want to use the same code for both.

Answer 1

The nice thing about JQM is that you it allows you to use a single source across desktop and mobile, especially if the content is more or less equal.

To limit your desktop site to 650px, you could use the following two CSS-grids:

1140px CSS GRID
960px CSS GRID

To get 650px just add some empty blocks before and after your content. On smaller displays your content will become fullwidth using media queries (to support on IE, be sure to include respond.js.

I haven't tried the 960 grid, but am using the 1140px grid a lot. Also works with JQM collapsibles, which is a plus.