What about Desktops?

Contact Us or call 1-877-932-8228
What about Desktops?

What about Desktops?

As mentioned above, jQuery Mobile is a mobile-centric library, emphasizing UI widgets and presentation specifically for smartphones and tablets. But (as also mentioned above), jQuery Mobile certainly works fine for desktop browsers. Offering a better desktop experience is easy enough with the addition of some CSS3 media queries.

Consider the jQuery Mobile main documentation page. When viewed on a desktop at a browser width greater than 650 pixels, the main navigation element sits to the left of the main content:

jQuery Mobile Docs page - wide browser

At browser widths narrower than 650 pixels, the design moves to a one-column layout, with the nav on top of the main content:

jQuery Mobile Docs page - narrow browser

The site accomplishes this with a custom stylesheet. A custom CSS stylesheet - that is, a CSS file the authors of the site have added themselves, separate from the standard jQuery Mobile stylesheet - directs the div layer holding the nav to float left when the browser is wider than 650 pixels:

@media all and (min-width: 650px){ /* some code omitted */ .content-secondary { text-align: left; float: left; width: 45%; background: none; } /* some code omitted */ }

As designers and developers, we can add whatever custom styles we want to our jQuery Mobile sites, enhancing the user experience for visitors who view our sites and Web applications on desktop browsers.