Responsive Content with jQuery Mobile

jQuery mobile has a liquid layout out of the box. It uses mostly CSS3 and very few images. This makes it very fluid with any screen dimensions. What you may want to consider is responsive content as well. Look at this page.┬áChange the size of your browser and you’ll notice that the menu is on the left on a desktop or tablet, but disappears when you get down to mobile size. You can achieve this kind of stuff with media queries. Look towards the end of their CSS file.┬áThe .content-secondary class defaults to display:none but the @media queries make it visible at a certain screen width. They also added a button to make it visible if you wanted


$(function(){
  $('body').delegate('.content-secondary .ui-collapsible-content', 'click', function(){
    $(this).trigger("collapse");
  });
});

The gist is that you could start with jQuery mobile and use media queries to add responsive content.

Leave a Reply