Categories

Render jQuery Mobile on Desktop Computers

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;
		}
}

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

IMPORTANT! To be able to proceed, you need to solve the following simple math (so I know that you are a human) :-)

What is 10 + 10 ?
Please leave these two fields as-is: