jQuery Mobile change form width when viewing from small screen?

Question

Does anyone know how to resize a jQuery mobile form to fit the device in which it is being viewed from. Currently I have a form that has text input fields that take up the whole screen when viewed from a desktop. However, when viewed from a cell phone the text inputs are still quite long and make my form very small and hard to use.

I have tried using the following css to resize for small screens but it only seems to resize the form itself and not the entire page giving me the display below. I have even tried the following selectors without luck: 'body', '.ui-mobile', '.ui-mobile body', '.ui-header', '.ui-body'

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

Without the css code from above i get the following display which isn't mush better:

I am wondering if there is a way with either jquery or css to make the entire page resize so that the form fields look bigger to the end user? Does anyone know how to do this?

Answer 1

added:

<meta name="viewport" content="width=device-width, initial-scale=1">

to the head and views much better from a phone!