Предотвратить изменение формы iPhone?

Ответ 1

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

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

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

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

Ответ 2

Этого можно предотвратить, установив font-size: 16px во все поля ввода.

Ответ 3

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

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

Это решение, также используемое различными фреймворками и позволяющее избежать использования метатега.

Ответ 4

Это может быть полезно посмотреть:

Отключить автоматическое масштабирование ввода и текст " tag - Safari на iPhone

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

Edit:

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

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

Разработать:

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

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

Ответ 5

Самый проголосовавший ответ, чтобы установить размер шрифта, не работает для меня. Используя 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-event, просто чтобы удалить его, похоже, не вызывает обновленного поведения.

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

Ответ 6

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

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

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

Ответ 7

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

//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">' );
})

Ответ 8

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

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

<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, и это работает как шарм!

Ответ 9

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

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