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

Question

Я создал HTML-страницу с тегом <input> с type="text". Когда я нажимаю на него с помощью Safari на iPhone, страница становится больше (автоматическое увеличение). Кто-нибудь знает, как это отключить?

Answer 1

Браузер будет масштабироваться, если размер шрифта меньше 16px и размер шрифта по умолчанию для элементов формы равен 11px (по крайней мере, в Chrome и Safari).

Кроме того, элемент select должен иметь присоединенный псевдокласс focus.

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

Нет необходимости использовать все вышеперечисленное, вы можете просто стилизовать нужные элементы, например: просто text, number и textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

Альтернативное решение, чтобы входные элементы наследовали от родительского стиля:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Answer 2

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

Новое: IOS все равно будет масштабироваться, если вы не используете 16px на входе без фокуса.

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

Я добавил фон, поскольку IOS не добавляет фон в выделение.

Answer 3

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

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

Это решает проблему, при которой ваша мобильная страница или форма будут «плавать» вокруг.

Answer 4

Вы можете запретить Safari автоматически увеличивать текстовые поля при вводе пользователем , не отключая возможность масштабирования. Просто добавьте maximum-scale=1, но не указывайте атрибут пользовательского масштаба, предложенный в других ответах.

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

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

Answer 5

В итоге ответ таков: установите размер шрифта элементов формы не менее 16px

Answer 6

input[type='text'],textarea {font-size:1em;}

Answer 7

Правильный способ исправить эту проблему - изменить окно просмотра мета на:

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

Answer 8

Нет чистого способа найти, но вот взлом ...

1) Я заметил, что событие наведения мыши происходит до увеличения, но увеличение происходит до событий mousedown или focus.

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

Итак, попробуйте это (показано в jquery для компактности):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

Это определенно хак ... могут быть ситуации, когда при наведении / выключении мыши не всегда перехватываются входы / выходы, но это хорошо сработало в моих тестах и ​​является хорошим началом.

Answer 9

Добавить user-scalable = 0 к метапорту вида следующим образом

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

работал для меня:)

Answer 10

Мне недавно (сегодня: D) пришлось интегрировать это поведение. Чтобы не влиять на исходные поля дизайна, включая комбо, я решил применить преобразование в фокусе поля:

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}