How To Create Responsive jQuery and HTML 5 apps

Continuing the discussion from How can I solve mobile phone devices compatibility issue for web app?:

I wanted to pick up on this one. I would have liked to participate so have reopened.

I too looked for ways to make jQM apps more responsive, control of page layout for example. Large screens present issues as well. Getting jQM list views to scale to the size of a larger screen and look okay a problem, fine on phones. Going by the post I reopened, I did look at how to reflow page content so multiple columns showed on larger viewports and then stacked one below the other on phones.

jResponse does this by
a. Injecting two stylable div elements into the standard jQM page layout
b. Providing a selection of grid layout controls that are responsive courtesy of CSS3 styling and/or JavaScript

On another forum, I received a mixed bag of views on how this is tackled. I am interested in knowing how coders here may have approached page layouts on different devices.

In a nutshell, use media queries to make the site responsive – if the screen is within a certain range, change the dimensions of certain content. Also, do not use fixed-width elements unless they can be modified in the media query. For instance, in my external style.css page, my rotating banner of class .slide will display on screens 900px and larger. Smaller than that, it has a display of none to remove it. In place of the rotating banner on smaller screens, I show a static jpg, class of .hide-for-big.

@media screen and (max-width:3000px) {
/* Big screens */
    .slide {display:block;}
}
@media screen and (max-width:899px) {
/* Medium */
    .slide {display:none;}
    .hide-for-big {display:block;}
}
@media screen and (max-width:640px) {
/* Small */
    .slide {display:none;} 
    .hide-for-big {display:block;}
}

The link in the post you quoted has information you can look up. There are lots of tips for making a site responsive, all under the umbrella phrase, “Responsive Web Design.”