jQuery Мобильная смена формы ширины при просмотре с маленького экрана?

Question

Кто-нибудь знает, как изменить размер мобильной формы jQuery, чтобы она соответствовала устройству, на котором оно просматривается. В настоящее время у меня есть форма, которая имеет поля ввода текста, которые занимают весь экран при просмотре с рабочего стола. Однако при просмотре сотового телефона текстовые входы все еще довольно длинные и делают мою форму очень маленькой и сложной в использовании.

Я попытался использовать следующий css для изменения размера для небольших экранов, но это только изменяет размер самой формы, а не всю страницу, дающую мне изображение ниже. Я даже попытался следующие селекторы без везения: 'тела', '.ui-мобильный', '.ui-мобильный корпус', '.ui-заголовок', '.ui-тело'

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

Без кода CSS из выше я получаю следующий экран, который не Кашицу лучше:

мне интересно, если есть способ, как с JQuery или CSS, чтобы сделать всю страницу изменения размера так, что поля формы больше подходят для конечного пользователя? Кто-нибудь знает как это сделать?

Answer 1

добавил:

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

к голове и взглядов гораздо лучше с телефона!