jQuery Mobile нежелательный зум с меню выбора

Question

При нажатии на меню выбора, родной выбор показывает, что я хочу.Но это также увеличивает масштаб страницы.

Можно ли отключить масштабирование глобально?

Из-за требований макета многие мои дивы находятся вне <div data-role="content">.

Мой выбор выглядит так.

<div id="inputField">
  <select name="shipping[shipping_method]" id="shipping[shipping_method]">
    <option value="opt_1">Option 1</option>
    <option value="opt_2">Option 2</option>
  </select>
</div>

Answer 1

Я исправил вышеуказанную проблему, увеличив размер шрифта.Минимальный размер шрифта, который требуется, чтобы Safari не увеличивал масштаб после нажатия на текст, составляет 50 пикселейПоэтому я добавил следующее правило CSS:

.ui-select .ui-btn select{
font-size: 50px;
}

Поскольку текст в любом случае скрыт, он не влияет на отображение.И вы также можете сохранить увеличение.

Answer 2

Вы можете глобально отключить масштабирование с помощью метатега области просмотра. Я не знаком с тем, как браузер увеличивает изображение, когда вы нажимаете на объект формы, поэтому я не уверен на 100%, что это будет правильным решением для вашей ситуации (но это еще что-то, что нужно попробовать ...) 1001 *

<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0" >

ПРИМЕЧАНИЕ: для отключения масштабирования важная часть: «начальный масштаб = 1,0, максимальный масштаб = 1,0». Установка этих значений на то же самое отключит масштабирование.

Answer 3

Решение Джаспера заставило мои страницы не масштабироваться должным образом при изменении ориентации устройства, немного лучшее решение, которое работает правильно в обеих ориентациях:

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