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

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

362
задан Eduardo Montenegro 07 июня '10 в 15:06
источник поделиться
26 ответов

Браузер будет увеличиваться, если размер шрифта меньше 16 16px а размер шрифта по умолчанию для элементов формы - 11 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;
}
350
ответ дан srikanth 18 июня '11 в 10:17
источник поделиться
@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 не добавляет фона для выбора.

185
ответ дан Christina 27 апр. '13 в 21:44
источник поделиться

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

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

Это решает проблему, что ваша мобильная страница или форма будет "плавать".

148
ответ дан Marcellino Bommezijn 04 дек. '12 в 18:21
источник поделиться

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

55
ответ дан Nik 05 окт. '11 в 2:56
источник поделиться

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

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

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

33
ответ дан daxmacrog 16 сент. '17 в 16:59
источник поделиться
input[type='text'],textarea {font-size:1em;}
33
ответ дан stormsweeper 24 сент. '10 в 1:01
источник поделиться

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
21
ответ дан Milos Matic 04 дек. '15 в 12:58
источник поделиться

Нет никакого чистого пути, который я мог бы найти, но вот взлом...

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

2) Вы можете динамически изменять тег viewport META с помощью javascript (см. Включить/отключить масштабирование iPhone Safari с помощью 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" />');
}

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

14
ответ дан dlo 04 марта '11 в 19:50
источник поделиться

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

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}
13
ответ дан piouPiouM 18 дек. '12 в 16:24
источник поделиться

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

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

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

12
ответ дан Tuyen Cao 11 окт. '16 в 18:19
источник поделиться

Я сделал это, также с 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 нарушает дизайн.

7
ответ дан Nicolas Hoizey 17 дек. '12 в 19:31
источник поделиться

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

$("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" />');
} 
7
ответ дан Ilkka R. 05 нояб. '13 в 12:21
источник поделиться

Я использовал решение Christina выше, но с небольшой модификацией для бутстрапа и другим правилом для применения к настольным компьютерам. Размер шрифта 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, за исключением фокуса, который изменил его на 16 пикселей, и он не устранил проблему масштабирования с iOS8. По крайней мере, на моем iPhone с помощью iOS8 размер шрифта должен быть 16 пикселей, прежде чем фокусироваться на iPhone, чтобы не увеличивать страницу.

7
ответ дан Tanny O'Haley 27 сент. '14 в 2:04
источник поделиться

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

input, textarea {
    font-size: initial;
}
6
ответ дан user1000952 02 сент. '14 в 4:00
источник поделиться

По прошествии некоторого времени я придумал это решение

// 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. Это предотвратит масштабирование. В случае фокуса он меняет размер шрифта обратно на начальное значение.

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

3
ответ дан jirikuchta 05 янв. '17 в 17:34
источник поделиться

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

У этого есть некоторые минусы, хотя, заметно "прыжок" в результате быстрого изменения размера шрифта, происходящего между состояниями "зависания" и "фокуса", а также влиянием перерисовки на производительность

3
ответ дан l3bel 09 февр. '17 в 17:54
источник поделиться

Установление размера шрифта (для полей ввода), равного размеру шрифта тела, похоже, не позволяет обозревать браузеру или нет. Я бы предложил использовать font-size: 1rem как более элегантное решение.

2
ответ дан sindiploma 26 апр. '15 в 14:05
источник поделиться

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

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

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}
2
ответ дан Jack Ottermans 14 апр. '15 в 3:39
источник поделиться

Основываясь на Ответ Стивена Уолша... Этот код работает без изменения размера шрифта входов на фокус (который выглядит хромым), плюс он по-прежнему работает с FastClick, который я предлагаю добавить ко всем мобильным сайтам, чтобы помочь принести "мгновенный". Отрегулируйте "ширину видового экрана" в соответствии с вашими потребностями.

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });
1
ответ дан rocky 27 июня '14 в 18:15
источник поделиться

Поскольку автоматическое масштабирование (без изменения масштаба) по-прежнему остается аннонированным на iPhone, здесь используется JavaScript на основе предложения dlo, работающего с фокусом/размытием.

Масштабирование отключается, как только текст вводится и повторно включается, когда вход остается.

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

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Следующий код изменит размер входного текста на 16 пикселей (рассчитывается, то есть в текущем размере масштабирования), когда элемент имеет фокус. Поэтому iPhone не будет автоматически увеличивать масштаб.

Примечание. Коэффициент масштабирования рассчитывается на основе окна window.innerWidth и iPhone с разрешением 320 пикселей. Это будет только для iPhone в портретном режиме.

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>
1
ответ дан BurninLeo 14 июля '13 в 16:13
источник поделиться

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

Я не знаю о вас всех, но использование px для размеров шрифтов - не лучший способ, вы должны использовать em.

Я столкнулся с этой проблемой на моем отзывчивом сайте, где мое текстовое поле больше 16 пикселей. У меня был контейнер формы, равный 2rem, а мое поле ввода - 1.4em. В моих мобильных запросах я изменяю размер шрифта html в зависимости от области просмотра. Поскольку по умолчанию html равен 10, мое поле ввода вычисляет 28px на рабочем столе

Чтобы удалить автоматическое масштабирование, мне пришлось изменить свой ввод на 1.6em. Это увеличило мой размер шрифта до 32px. Чуть выше и едва заметно. На моем iPhone 4 и 5 я меняю свой размер шрифта html на 15 пикселей для портрета и обратно до 10 пикселей для пейзажа. Похоже, что сладкое пятно для этого размера пикселя составило 48 пикселей, поэтому я изменился с 1.4em (42px) до 1.6em (48px).

То, что вам нужно сделать, это найти сладкое пятно на размер шрифта, а затем преобразовать его назад в ваши размеры rem/em.

1
ответ дан Jon Tinsman 26 мая '16 в 20:41
источник поделиться

Мне пришлось "исправить" автоматическое масштабирование в вопросе управления формами для веб-сайта голландского университета (который использовал 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 лет, как классный бонус)
  • Использование event-delegation, потому что у многих сайтов, на которых я работаю, есть страницы, которые могут динамически создавать элементы управления формой
  • Установка eventListeners в элемент html (documentElement), чтобы не дожидаться, пока тело станет доступным (не хотите беспокоиться о проверке готовности/загрузки документа или необходимости ждать события DOMContentLoaded)
0
ответ дан Mark de Jong 06 июля '18 в 19:46
источник поделиться

Мне потребовалось некоторое время, чтобы найти его, но вот лучший код, который я нашел...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});
0
ответ дан Stephen Walsh 06 июня '14 в 18:10
источник поделиться

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

.form-control {
  font-size: 16px;
}
0
ответ дан Bohdan Vorona 01 дек. '17 в 12:40
источник поделиться

Вот хак, который я использовал в одном из моих проектов:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

Закончился первоначальными стилями и масштабами, которые я хотел, но не увеличил фокус.

0
ответ дан magom001 01 авг. '18 в 18:23
источник поделиться

ИТ-РАБОТА!!! Я ЗАВЕРШЕСЬ МОЙ ПОИСК JOURNEY!

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

протестирован на iPhone OS6, Android 2.3.3 Emulator

У меня есть мобильный сайт с фиксированной шириной 640 пикселей, и я столкнулся с автозапуском на фокусе.

Я пытался распределить slutions, но никто не работал на iPhone и Android!

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

вот где я его найду: Как сделать масштабирование и масштабирование виджета для поддержки кросс-браузера?

-6
ответ дан ygaradon 14 мая '14 в 12:49
источник поделиться

Другие вопросы по меткам