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

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

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

Браузер будет увеличиваться, если размер шрифта меньше 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;
}
374
ответ дан 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 не добавляет фона для выбора.

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

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

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

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

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

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

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

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

75
ответ дан daxmacrog 16 сент. '17 в 16:59
источник поделиться

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

59
ответ дан Nik 05 окт. '11 в 2:56
источник поделиться
input[type='text'],textarea {font-size:1em;}
34
ответ дан 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
источник поделиться

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

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

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

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

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

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

Я использовал решение 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
источник поделиться

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
источник поделиться

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

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

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

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

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

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

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

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

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

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

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

Я вижу, что люди здесь делают некоторые странные вещи с 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
источник поделиться

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

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

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

Комментарий для верхнего ответа о настройке размера шрифта на 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
источник поделиться

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

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

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

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

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

Пожалуйста, не используйте Javascript или хаки, чтобы он работал. Это повлияет на оценку вашего проекта в Интернете.

Это сделает свое дело:

input, input:active, input:focus, input:focus-within, input:hover, input:visited {
    font-size: 16px!important;
}
0
ответ дан Chocoprins18 09 дек. '18 в 23:13
источник поделиться

В Angular вы можете использовать директивы для предотвращения увеличения фокуса на устройствах IOS. Нет метатега для сохранения доступности.

import { Directive, ElementRef, HostListener } from '@angular/core';

const MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX = 16;

@Directive({ selector: '[noZoomiOS]' })

export class NoZoomiOSDirective {
  constructor(private el: ElementRef) {}

@HostListener('focus')
  onFocus() {
    this.setFontSize('');
  }

@HostListener('mousedown')
  onMouseDown() {
    this.setFontSize('${MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX}px');
  }

private setFontSize(size: string) {
  const { fontSize: currentInputFontSize } = window.getComputedStyle(this.el.nativeElement, null);

  if (MINIMAL_FONT_SIZE_BEFORE_ZOOMING_IN_PX <= +currentInputFontSize.match(/\d+/)) {
      return;
   }

  const iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
  iOS 
     && (this.el.nativeElement.style.fontSize = size);
 }
}

Вы можете использовать его как <input noZoomiOS > после того, как объявите его в своем *.module.ts

0
ответ дан Adrien Castagliola 05 нояб. '18 в 16:47
источник поделиться

Вместо того, чтобы просто установить размер шрифта в 16px, вы можете:

  1. Стиль поля ввода так, чтобы он был больше, чем предполагалось, позволяя установить логический размер шрифта 16 пикселей.
  2. Используйте CSS-преобразование scale() и отрицательные поля, чтобы уменьшить поле ввода до нужного размера.

Например, предположим, что ваше поле ввода изначально имеет стиль:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

Если вы увеличите поле, увеличив все размеры на 16/12 = 133,33%, а затем уменьшите с помощью scale() на 12/16 = 75%, поле ввода будет иметь правильный визуальный размер (и размер шрифта), и будет нет увеличения фокуса.

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

С этим CSS:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

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

У меня есть запись в блоге, где я углубляюсь в некоторые детали, и у меня есть этот пример для просмотра HTML:
Нет увеличения изображения в Safari на iPhone, пиксель идеальный способ

0
ответ дан Jeffery To 01 нояб. '18 в 20:35
источник поделиться

Мне пришлось "исправить" автоматическое масштабирование в вопросе управления формами для веб-сайта голландского университета (который использовал 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
источник поделиться

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

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

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

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

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

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

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

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

Другие вопросы по меткам или Задайте вопрос