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

Question

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

Answer 1

Javascript hack, работающий на iOS 7. Это основано на ответе @dlo, но события mouseover и mouseout заменяются событиями touchstart и touchend.По сути, этот сценарий добавляет тайм-аут на полсекунды, прежде чем зум снова включится, чтобы предотвратить масштабирование.

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

Answer 2

Я использовал решение Кристины выше, но с небольшой модификацией для начальной загрузки и другим правилом, применимым к настольным компьютерам. Размер шрифта по умолчанию в Bootstrap составляет 14 пикселей, что вызывает увеличение. Следующее изменяет его на 16px для «элементов управления форм» в Bootstrap, предотвращая увеличение.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

И обратно в 14px для не мобильных браузеров.

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

Я попытался использовать .form-control: focus, который оставил его на 14px, кроме фокуса, который изменил его на 16px, и это не решило проблему масштабирования с iOS8. По крайней мере, на моем iPhone с iOS8 размер шрифта должен быть 16px перед фокусировкой, чтобы iPhone не увеличивал масштаб страницы.

Answer 3

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

input, textarea {
    font-size: initial;
}

Answer 4

Я сделал это, также с jQuery:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

Конечно, некоторые другие элементы интерфейса, возможно, придется адаптировать, если этот 16px размер шрифта нарушает дизайн.

Answer 5

Через некоторое время попыток я нашел это решение

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

В режиме "mousedown" он устанавливает размер шрифта для ввода в 16px.Это предотвратит увеличение.На событии фокуса он изменяет размер шрифта обратно к начальному значению.

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

Answer 6

Прочитав здесь почти каждую строчку и протестировав различные решения, спасибо всем, кто поделился своими решениями, что я придумал, протестировал и работал для меня на iPhone 7 iOS 10.x:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

Тем не менее, у него есть некоторые недостатки: заметно «скачок» в результате быстрого изменения размера шрифта, происходящего между состояниями ed «hover» и ed «focus» - и влияние перерисовки на производительность

Answer 7

Псевдоэлементы, такие как :focus, не работают, как раньше. Начиная с iOS 11, простое объявление сброса может быть добавлено перед вашими основными стилями (при условии, что вы не переопределите их с меньшим размером шрифта).

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

Стоит отметить, что для библиотек CSS, таких как Tachyons.css, легко случайно изменить размер шрифта.

Например, класс: f5 эквивалентен: fontSize: 1rem, что хорошо, если вы сохранили масштаб шрифта основного текста по умолчанию.

Однако: если вы выберете класс размера шрифта: f6 это будет эквивалентно fontSize: .875rem на маленьком дисплее вверх. В этом случае вам нужно быть более точным в отношении деклараций сброса:

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Answer 8

Мне пришлось «исправить» проблему автоматического увеличения в элементах управления формы для веб-сайта Голландского университета (в котором использовались 15px в элементах управления формой) Я выдвинул следующий набор требований:

• пользователь все еще должен иметь возможность увеличить
• размер шрифта должен оставаться прежним
• без вспышек временного различного стиля
• нет требований jQuery
• должен работать на новейшей iOS и не препятствовать любой другой комбинации ОС / устройства
• если возможно, никаких магических таймаутов, а при необходимости правильно сбрасывать таймеры

Это то, что я до сих пор придумал:

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

Некоторые заметки:

• Обратите внимание, что до сих пор я тестировал его только на iOS 11.3.1, но скоро опробую его на нескольких других версиях
• Использование событий focusIn означает, что для него требуется как минимум iOS 5.1 (но я считаю, что сайты, которые мы создаем, работающие на версиях iOS старше 9, как крутой бонус)
• Использование делегирования события, потому что на многих сайтах, над которыми я работаю, есть страницы, которые могут динамически создавать элементы управления формой
• Установка для eventListeners элемента html (documentElement), чтобы не нужно было ждать, пока тело станет доступным (не нужно беспокоиться о проверке, находится ли документ в состоянии готовности / загрузки, или нет необходимости ждать события DOMContentLoaded)

Answer 9

Кстати, если вы используете Bootstrap , вы можете просто использовать этот вариант:

.form-control {
  font-size: 16px;
}

Answer 10

Я вижу, что люди здесь делают странные вещи с помощью JavaScript или функции окна просмотра и отключают все масштабирование вручную на устройствах. Это не должно быть решением по моему мнению. Добавление этого фрагмента CSS отключит автоматическое увеличение в iOS без изменения размера шрифта до фиксированного числа, например 16px.

По умолчанию я использую размер шрифта 93,8% (15 пикселей) в полях ввода и добавляя мой фрагмент кода CSS, он остается на уровне 93,8%. Нет необходимости менять значение на 16px или делать его фиксированным.

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}