jQuery Mobile and responsive design: a legacy guide

Responsive design is primarily a layout practice: fluid dimensions, flexible media, readable text, and CSS media queries let a page adapt to the available space. A mobile UI framework can add widgets and navigation behaviour, but it does not automatically make every layout responsive or accessible.

Know the status of jQuery Mobile

The latest stable release listed by the project is jQuery Mobile 1.4.5, released in 2014. Treat it as a legacy dependency for maintaining an existing application, not as a current default for a new site. It depends on jQuery and has its own page-enhancement and navigation conventions. Before upgrading a legacy app, inventory widgets, themes, and URL behaviour and test them against the browsers your users actually use.

The official download page has the 1.4.5 files and setup snippet. Its old dependencies are not a general recommendation for new production projects.

Use CSS for a responsive layout

This minimal example adapts a two-column layout using modern CSS. It does not need jQuery Mobile. In a real page, choose breakpoints from the content rather than targeting named devices.

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
  .cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
  @media (max-width: 42rem) {
    .cards { grid-template-columns: 1fr; }
  }
</style>

<section class="cards" aria-label="Guides">
  <article><h2>First guide</h2><p>Description.</p></article>
  <article><h2>Second guide</h2><p>Description.</p></article>
</section>

If you must maintain a jQuery Mobile page

Load its CSS, then a compatible jQuery version, then jQuery Mobile; preserve this order. Start with one small widget, avoid duplicate IDs, and check that the framework has not enhanced the same element twice. The old project sample uses jQuery 1.11.1 with jQuery Mobile 1.4.5; do not copy that dated dependency pair into a new site without an explicit compatibility reason.

For new work, prefer semantic HTML, native form controls, CSS layout, and a maintained component library only when the project needs one. This reduces the number of framework-specific behaviours that have to be learned and maintained.