Question

I have a jQuery Mobile webpage which currently has a width=device-width but my form elements (textfields and the submit button) stretch to the width of the browser when viewed on a desktop computer.

Is there any way to set a maximum width so that these elements (or the whole content div) display properly on mobile devices but don’t exceed a fixed maximum width when viewed on desktop computers?

Answer 1

    <style type='text/css'>
    <!--
        html { background-color: #333; }
        @media only screen and (min-width: 600px){
            .ui-page {
                width: 600px !important;
                margin: 0 auto !important;
                position: relative !important;
                border-right: 5px #666 outset !important;
                border-left: 5px #666 outset !important;
            }
        }
    -->
    </style>

The @media only screen and (min-width: 600px) restricts the CSS rule to desktop devices with a minimum window width of 600px. For these the width of the page container created by jQuery Mobile is fixed to 600px, margin: 0 auto centers the page. The rest improves the result aesthetically.

However, ther is one drawback: this doesn’t really play well with the sliding animation. I suggest to disable the animation (maybe also depending on the media type and screen size using @media), because it looks just weird on a big screen anyways.