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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
@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; } } |