Отключить автоматическое увеличение ввода & ldquo; Текст & rdquo; тег - Safari на iPhone

Как много других ответов уже указали, это может быть достигнуто путем добавления maximum-scale к тегу meta viewport. Однако это имеет негативное последствие отключения пользовательского масштабирования на устройствах на базе Android . ( Это не отключает пользовательское масштабирование на устройствах на iOS начиная с v10.)

Мы можем использовать JavaScript для динамичного добавления maximum-scale к meta viewport, когда устройство является iOS. Это достигает лучшего из обоих миров: мы позволяем пользователю масштабировать , и препятствуют тому, чтобы iOS масштабировала в текстовые поля на фокусе.

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

Код:

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

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

Моя ситуация немного отличалась от описанной той.

шахта In, у меня был некоторый contenteditable текст в отделении на странице. То, когда пользователь нажал на DIFFERENT div, своего рода кнопку, я автоматически выбрал некоторый текст в contenteditable отделении (диапазон выбора, который был ранее сохранен и очистился), выполнило обогащенный текст execCommand на том выборе и очистило его снова.

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

ну, на Safari iPad, нажимая цветное отделение привел к подъему экранной клавиатуры и ничему, что я сделал предотвратит его.

я наконец выяснил как выполнение iPad этого.

Это прислушивается к touchstart и последовательности touchend, которая инициировала выбор доступного для редактирования текста.

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

На самом деле, это делает кукольное масштабирование, где это разворачивает базовую страницу при увеличивании масштаб доступного для редактирования текста. Мне потребовался день только для понимания то, что я видел.

, Таким образом, решение, которое я использовал, состояло в том, чтобы прервать и touchstart и touchend на тех конкретных цветных отделениях В обоих обработчиках, я останавливаю распространение и пузырение и возвращаю false. Но в touchend событии я инициировал то же поведение тот инициированный щелчок.

Так, прежде, Safari инициировал то, что я думаю, был "touchstart", "mousedown", "touchend", "mouseup", "нажмите", и из-за моего кода, текстового выбора, в том порядке.

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

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

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

Вдохновленный ответом @jirikuchta, я решил эту проблему путем добавления этого это CSS:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

Никакой JS, и я не замечаю флэш-памяти или чего-либо.

стоит отметить что viewport with область просмотра maximum-scale=1 also works, but not when the page is loaded as an iframe, or if you have some other script modifying the', и т.д.