it-roy-ru.com

Предотвратить 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
Atadj

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


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

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

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

64
Andrea Turri

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

69
Supra

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

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

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

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

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

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

3
atorgfr

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

3
Alex

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

Отключить автоматическое увеличение ввода «Текст» тег - Safari на iPhone

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

Правка:

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

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

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

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

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

3
Charlie

Установка размера шрифта отлично работает для элементов ввода, но не для отдельных элементов для меня. Для тегов 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">' );
})
2
gregkerzhner

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

0
Hugo Lauzon

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

 @media screen и (-webkit-min-device-pixel-ratio: 0) {
 Выбрать,
 TextArea, 
 вход {
 размер шрифта: 16 пикселей! важно; 
 } 
 } 

0
Adeel Malik

вот решение 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
jalalBK

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

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

0
daxmacrog