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

Код:

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

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

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

 Atadj16 июн. 2012 г., 16:35
@Charlie - блокирует масштабирование всего сайта, а не только форм.
 Stu Furlong28 сент. 2017 г., 05:05
 Charlie16 июн. 2012 г., 16:29

Ответы на вопрос(10)

& lt; a href = & quot; https: //stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone" & gt; отключить автоматическое увеличение при вводе & quot; Текст & quot; ; тег - Safari на iPhone

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

Редактировать:

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

2) You can dynamically change the META viewport tag using javascript (see Enable/disable zoom on iPhone safari with Javascript?)

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

Viewport meta tag is set to allow zooming User taps on form element, changes meta tag to disable zooming Upon pressing done, viewport is changed to allow zoom

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

 Atadj16 июн. 2012 г., 16:40
Он содержит 3 решения - ни одно из них не удовлетворяет меня :( (2 не работают в моем случае).
 16 июн. 2012 г., 17:20
Отредактировано с возможным решением
 Atadj16 июн. 2012 г., 18:49
Спасибо, Чарли. Ваше решение действительно работает, как и ожидалось, но другой человек предложил что-то более простое, что отлично в моей ситуации. Мне нужно было только увеличить размер шрифта SELECT до 40 пикселей (ширина области просмотра = 735 пикселей). Теперь навигация на iPhone четко читаема и не увеличивает изображение.

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

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

 11 авг. 2017 г., 01:45
Это все еще работает? Это не на моем iPhone 7.
 02 окт. 2017 г., 18:08
@SeaBass это нужно использоватьin conjuction with user-scalable=0 устанавливается на мета-тег видового экрана.
 10 нояб. 2017 г., 03:56
это то же самое, что уже было предложено решение 16px, но с некоторым плохим кодом

чтобы установить размер шрифта, не работает для меня. С помощью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">');
        });
    }
});

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

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

но не для отдельных элементов для меня. Для тегов select мне нужно активно отключить масштабирование области просмотра, когда пользователь начинает взаимодействовать с элементом 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">' );
})

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

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

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

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

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

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

Как упоминалось в 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, и он работает как шарм!

Решение Вопроса

UPDATE

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

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

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

 16 июн. 2017 г., 23:57
@AndreaTurri Хотя бы отредактируйте свой ответ, чтобы сэкономить время людей.
 Atadj16 июн. 2012 г., 18:48
Это работает, начиная с размера шрифта: 40px! :) (область просмотра установлена на ширину = 735 пикселей). Спасибо!
 05 мая 2014 г., 16:30
Это отключает масштабирование, используйте размер шрифта для лучшего пользовательского опыта.
 16 июн. 2012 г., 16:46
попытаться датьfont-size: 16px чтобы:input[type="text"], input[type="number"], textarea.
 Atadj16 июн. 2012 г., 16:34
Мне нужна функция масштабирования на сайте. Я просто не хочу этого для форм.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

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

 10 нояб. 2017 г., 03:59
Я пробовал что-то подобное, и это работало на IOS 10.3.3. я установил минимальный и максимальный масштаб на 1, и опускал масштабируемый пользователем (при условии, что по умолчанию это да)

Ваш ответ на вопрос