Предотвратить iPhone от масштабирования формы?

код:

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

когда я касаюсь select, iPhone увеличивает этот элемент (и не уменьшает масштаб после отмены выбора).

как я могу предотвратить это? Или уменьшить масштаб? Я не могу использовать user-scalable=no потому что мне действительно нужна эта функциональность. Это для iPhone, выберите меню.

41
css html html-select ios iphone

11 ответов

обновление: Этот метод больше не работает на iOS 10.

Это зависит от видового экрана, вы можете отключить его таким образом:

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

добавить user-scalable=0 и он также должен работать на ваших входах.

63

Это можно предотвратить, установив размер шрифта: 16px для всех полей ввода.

69

для iOS вы можете избежать масштабирования входных элементов, просто выделив им размер шрифта, который считается достаточным для ОС (>=16px), таким образом, избегая необходимости масштабирования, например:

input, select, textarea {
    font-size: 16px;
}

Это решение также использовать различные рамки и позволяет избежать использования мета-тега.

17

Это может быть полезно взглянуть на:

отключить автоматическое увеличение входного тега "текст" - Safari на iPhone

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

Edit:

ссылка упоминает,

2) Вы можете динамически изменять тег meta viewport с помощью javascript (видеть Включить / отключить масштабирование на iPhone safari с помощью Javascript?)

разработка:

  1. метатег Viewport настроен на разрешение масштабирования
  2. пользователь нажимает на элемент формы, изменяет метатег, чтобы отключить масштабирование
  3. после нажатия кнопки Готово, видовое окно изменяется, чтобы увеличить

и если вы не можете изменить тег при нажатии на элемент формы, поместите div, который имитирует элемент формы, который при нажатии на него изменяет тег, а затем вызывает вход.

3

самый проголосованный ответ для установки размера шрифта не работает для меня. Используя JavaScript для идентификации клиента вместе с метатегами в ответах здесь мы можем предотвратить поведение масштабирования iPhone при вводе фокуса, в противном случае сохраняя функциональность масштабирования нетронутой.

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $('meta[name=viewport]').remove();
            $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
        });
    }
});

похоже, что мы должны заменить мета-тег новыми значениями в blur-событии, просто чтобы удалить его, похоже, не вызывает обновленного поведения.

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

3
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

больше не работает на iOS10.0.1

font-size:16px работает

3

настройка размера шрифта отлично работает для входных элементов, но не для выбранных элементов для меня. Для тегов select мне нужно активно отключить масштабирование видового экрана, когда пользователь начинает взаимодействовать с элементом select, а затем повторно включить его на finish. 

//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})

$('select').focusout(function(){
  $('meta[name=viewport]').remove();
  $('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})
2

просто нашел простое исправление, если вы используете Bootstrap:

Как упоминалось в w3s: вы можете быстро размер метки и формы элементов управления в горизонтальной форме, добавив .форма-группа-ЛГ для элемент.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

см. Второй пример на этой странице: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

проверял в Safari и Chrome на iPhone SE и он работает как шарм!

0

Итак, вот окончательное исправление, которое хорошо работает для меня.


    @media screen and (-webkit-min-device-pixel-ratio:0) { 
      select,
      textarea,
      input {
        font-size: 16px !important;
      }
    }
0

вот решение jQuery хорошо работает для меня.

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input,  select, textarea {font-size: 16px;}</style>');
}
0

использовать maximum-scale=1 вместо user-scalable=no чтобы предотвратить проблему масштабирования формы, не нарушая способность пользователя сжимать масштабирование.

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

0