If you designed a jQuery Mobile site that it is intended for small size screens, that does not mean that someone will never open your app from a desktop computer. Obviously, an app that was design for an actual screen size of 320 px will not look right if it is opened on a desktop computer.
To prevent the app from looking awful, we can apply CSS to restrict the jQuery Mobile pages from rendering at a width higher that, let’s say, 480 px.
@media only screen and (min-width : 480px) {
div[data-role="page"] > *[data-role="header"],
div[data-role="page"] > *[data-role="footer"] {
width: 480px !important;
left: 50%;
margin-left: -240px;
}
div[data-role="page"] {
width: 480px !important;
left: -240px !important;
margin-left: 50%;
}
/* add your favorite image to the background */
body {
background-image: url('my-favorite-background.jpg');
background-attachment: fixed;
}
}