CODEWITHSUNDEEP
htmljquery-mobilemobiletablet
littleswany
littleswany

Reputation: 483

Can you have 1 layout for mobiles and another for tablets with jQuery mobile?

I am developing an app using jQuery mobile and I want to have 2 designs/layouts, 1 for movile devices and another for tablets. Is that possible? if so how? Is it some code?

Thanks! Noah

Upvotes: 0

Views: 97

Answers (1)

APAD1
APAD1

Reputation: 13666

Expanding on my comment above, you would just set up your CSS file with media queries to change the layout depending on the browser window size. Media Queries look like this:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    **PUT YOUR MOBILE STYLES HERE**
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    **PUT YOUR TABLET STYLES HERE**
}

You can change the min/max widths to suit your needs.

Let's say you had a button with the class of donate. On mobile you want the button to span 100% of the width of the containing div, but on tablet you want it to be a set width of 300px. This is how you would set the media queries up:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
    .donate {
       width:100%;
    }
}

/* Tablets (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    .donate {
       width:300px;
    }
}

Upvotes: 1

Related Questions