Disabilita Zoom automatico nel tag di immissione "Testo" - Safari su iPhone

Ho creato una pagina HTML con un <input>tag type="text". Quando faccio clic su di esso usando Safari su iPhone, la pagina diventa più grande (zoom automatico). Qualcuno sa come disabilitarlo?

Il browser eseguirà lo zoom se la dimensione del carattere è inferiore 16pxe la dimensione del carattere predefinita per gli elementi del modulo è 11px(almeno in Chrome e Safari).

Inoltre, l' selectelemento deve avere la focuspseudo-classe collegata.

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;
}

Non è necessario utilizzare tutto quanto sopra, si può solo lo stile gli elementi necessari, ad esempio: solo text, numbere textarea:

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

Soluzione alternativa per far ereditare gli elementi di input da uno stile principale:

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

Puoi impedire a Safari di ingrandire automaticamente i campi di testo durante l'immissione dell'utente senza disabilitare la possibilità dell'utente di pizzicare lo zoom. Basta aggiungere maximum-scale=1ma tralasciare l'attributo di scala utente suggerito in altre risposte.

È un'opzione utile se hai un modulo in un livello che "galleggia" intorno se ingrandito, il che può far sì che importanti elementi dell'interfaccia utente si spostino dallo schermo.

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

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

Novità: IOS eseguirà comunque lo zoom, a meno che non si utilizzi 16 px sull'input senza lo stato attivo.

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

Ho aggiunto uno sfondo poiché IOS non aggiunge sfondo alla selezione.

Se il tuo sito Web è progettato correttamente per un dispositivo mobile, potresti decidere di non consentire il ridimensionamento.

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

Questo risolve il problema che la tua pagina mobile o modulo sta per "fluttuare" intorno.

In breve, la risposta è: impostare la dimensione del carattere degli elementi del modulo su almeno 16px

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

Il modo corretto per risolvere questo problema è cambiare meta viewport in:

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

Non riesco a trovare un modo pulito, ma ecco un trucco ...

1) Ho notato che l'evento del mouseover si verifica prima dello zoom, ma lo zoom avviene prima degli eventi di mouse o focus.

2) Puoi cambiare dinamicamente il tag viewport META usando javascript (vedi Abilitare / disabilitare lo zoom su iPhone Safari con Javascript? )

Quindi, prova questo (mostrato in jquery per compattezza):

$("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" />');
}

Questo è sicuramente un trucco ... potrebbero esserci situazioni in cui il passaggio del mouse / giù non sempre rileva voci / uscite, ma ha funzionato bene nei miei test ed è un buon inizio.

Aggiungi user-scalable = 0 al viewport meta come segue

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

Ha funzionato per me :)

Di recente (oggi: D) ho dovuto integrare questo comportamento. Al fine di non influire sui campi di progettazione originali, inclusa la combo, ho optato per applicare la trasformazione al centro del campo:

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

Come molte altre risposte hanno già sottolineato, questo può essere ottenuto aggiungendo maximum-scaleal meta viewporttag. Tuttavia, ciò ha la conseguenza negativa di disabilitare lo zoom utente sui dispositivi Android . ( Non disabilita lo zoom utente sui dispositivi iOS dalla v10 .)

Possiamo usare JavaScript per aggiungere dinamicamente maximum-scaleal meta viewportquando il dispositivo è iOS. Ciò consente di ottenere il meglio da entrambi i mondi: consentiamo all'utente di eseguire lo zoom e di impedire a iOS di ingrandire i campi di testo in primo piano.

| 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               |

Codice:

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;

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

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

Hack di Javascript che funziona su iOS 7. Questo si basa sulla risposta di @dlo ma gli eventi di passaggio del mouse e del mouseout sono sostituiti da eventi touchstart e touchend. Fondamentalmente questo script aggiunge un timeout di mezzo secondo prima che lo zoom venga nuovamente abilitato per impedire lo zoom.

$("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" />');
} 

Questo ha funzionato per me:

input, textarea {
    font-size: initial;
}

Ho usato la soluzione di Christina sopra, ma con una piccola modifica per bootstrap e un'altra regola da applicare ai computer desktop. La dimensione del carattere predefinita di Bootstrap è 14px che causa lo zoom. Di seguito viene modificato in 16px per "controlli modulo" in Bootstrap, impedendo lo zoom.

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

E torna a 14px per browser non mobili.

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

Ho provato a usare .form-control: focus, che lo ha lasciato a 14px tranne che su focus che lo ha cambiato a 16px e non ha risolto il problema di zoom con iOS8. Almeno sul mio iPhone usando iOS8, la dimensione del carattere deve essere 16px prima di mettere a fuoco l'iPhone per non ingrandire la pagina.

L'ho fatto, anche con 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'));
});

Naturalmente, alcuni altri elementi nell'interfaccia potrebbero dover essere adattati se questa 16pxdimensione del carattere rompe il design.

Dopo un po 'di tempo ho provato questa soluzione

// 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 = "";
});

Su "mousedown" imposta la dimensione del carattere dell'input su 16px. Ciò impedirà lo zoom. Nell'evento focus, la dimensione del carattere torna al valore iniziale.

A differenza delle soluzioni precedentemente pubblicate, questo ti permetterà di impostare la dimensione del carattere dell'input su quello che vuoi.

Dopo aver letto quasi ogni singola riga qui e testato le varie soluzioni, questo è, grazie a tutti coloro che hanno condiviso le loro soluzioni, quello che ho ideato, testato e lavorato per me su 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;}
}

Ha alcuni svantaggi, tuttavia, evidentemente un "salto" a causa della rapida modifica della dimensione del carattere che si verifica tra gli stati "hover" ed "focus" ed e l'impatto del ridisegno sulle prestazioni

Ispirato dalla risposta di @jirikuchta, ho risolto questo problema aggiungendo questo bit di CSS:

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

No JS, e non noto alcun flash o altro.

Vale la pena notare che a viewportwith maximum-scale=1funziona anche, ma non quando la pagina viene caricata come iframe, o se hai qualche altro script che modifica il viewport, ecc.

Pseudo elementi come :focusnon funzionano come una volta. Da iOS 11, è possibile aggiungere una semplice dichiarazione di ripristino prima dei propri stili principali (a condizione che non vengano sovrascritti con una dimensione del carattere inferiore).

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

Vale la pena ricordare che per le librerie CSS come Tachyons.css è facile sostituire accidentalmente la dimensione del carattere.

Ad esempio class: f5equivale a:, fontSize: 1remche va bene se la scala del carattere del corpo è stata mantenuta sul valore predefinito.

Tuttavia: se si sceglie la classe di dimensione del carattere: f6questo sarà equivalente a fontSize: .875remsu un piccolo display verso l'alto. In tal caso dovrai essere più specifico sulle dichiarazioni di ripristino:

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

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

/* not small */

}

A proposito, se usi Bootstrap , puoi semplicemente usare questa variante:

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

Ho dovuto "risolvere" il problema dello zoom automatico nel controllo dei moduli per un sito Web dell'Università olandese (che utilizzava 15px nei controlli del modulo). Mi è venuta in mente la seguente serie di requisiti:

• l'utente deve essere ancora in grado di ingrandire
• la dimensione del carattere deve rimanere la stessa
• nessun lampo di stile diverso temporaneo
• nessun requisito jQuery
• deve funzionare sul iOS più recente e non ostacolare qualsiasi altra combinazione sistema operativo / dispositivo
• se possibile, nessun timeout magico e, se necessario, azzerare correttamente i timer

Questo è quello che mi è venuto in mente finora:

/*
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);
  }
}

Alcune note:

• Nota che finora l'ho provato solo su iOS 11.3.1, ma lo proverò presto su alcune altre versioni
• Uso di focusIn eventi significa che richiede almeno iOS 5.1 (ma vedo comunque i siti che costruiamo funzionare nelle versioni iOS precedenti a 9 come un bel bonus)
• Uso della delega degli eventi perché molti siti su cui lavoro hanno pagine che potrebbero creare dinamicamente controlli di modulo
• Impostare eventListeners sull'elemento html (documentElement) in modo da non dover aspettare che il corpo diventi disponibile (non voglio preoccuparti di controllare se il documento ha lo stato pronto / caricato o di dover attendere l'evento DOMContentLoaded)

Invece di impostare semplicemente la dimensione del carattere su 16px, puoi:

1. Modellare il campo di input in modo che sia più grande della dimensione prevista, consentendo di impostare la dimensione del carattere logico su 16px.
2. Utilizzare la scale()trasformazione CSS e i margini negativi per ridurre il campo di input fino alla dimensione corretta.

Ad esempio, supponiamo che il tuo campo di input sia originariamente disegnato con:

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

Se ingrandisci il campo aumentando tutte le dimensioni del 16/12 = 133,33%, quindi riduci utilizzando scale()del 12/16 = 75%, il campo di input avrà la dimensione visiva corretta (e la dimensione del carattere) e non ci sarà alcun ingrandimento messa a fuoco.

Poiché scale()influisce solo sulla dimensione visiva, dovrai anche aggiungere margini negativi per ridurre la dimensione logica del campo.

Con questo 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%;
}

il campo di input avrà una dimensione del carattere logico di 16px mentre sembra avere un testo di 12px.

Ho un post sul blog in cui vado un po 'più in dettaglio, e ho questo esempio come HTML visualizzabile:
nessun input zoom in Safari su iPhone, il modo pixel perfetto

Anche con queste risposte mi ci sono voluti tre giorni per capire cosa stesse succedendo e potrei aver bisogno di nuovo la soluzione in futuro.

La mia situazione era leggermente diversa da quella descritta.

Nel mio, avevo un testo appagante in un div sulla pagina. Quando l'utente ha fatto clic su un DIVERSO div, un tipo di pulsante, ho selezionato automaticamente del testo nel div contenteditable (un intervallo di selezione che era stato precedentemente salvato e cancellato), ho eseguito un richCommand rich text su quella selezione e l'ho cancellato di nuovo.

Ciò mi ha permesso di cambiare in modo invisibile i colori del testo in base alle interazioni dell'utente con i div di colore in altre parti della pagina, mantenendo la selezione normalmente nascosta per consentire loro di vedere i colori nel giusto contesto.

Bene, su Safari di iPad, facendo clic sul div di colore si è verificata la comparsa della tastiera su schermo, e nulla che ho fatto lo avrebbe impedito.

Alla fine ho capito come sta andando l'iPad.

Ascolta una sequenza di touchstart e touchend che attiva una selezione di testo modificabile.

Quando si verifica quella combinazione, mostra la tastiera su schermo.

In realtà, esegue uno zoom dolly in cui espande la pagina sottostante mentre ingrandisce il testo modificabile. Mi ci è voluto un giorno solo per capire cosa stavo vedendo.

Quindi la soluzione che ho usato è stata quella di intercettare sia il touchstart che il touchend su quei particolari div di colore. In entrambi i gestori interrompo la propagazione e il gorgoglio e ritorno falso. Ma nel caso del touchend innesco lo stesso comportamento attivato dal clic.

Quindi, prima, Safari stava innescando quello che penso fosse "touchstart", "mousedown", "touchend", "mouseup", "click", e grazie al mio codice, una selezione di testo, in quell'ordine.

La nuova sequenza a causa delle intercettazioni è semplicemente la selezione del testo. Tutto il resto viene intercettato prima che Safari possa elaborarlo e fare le sue cose da tastiera. Le intercettazioni touchstart e touchend impediscono anche l'attivazione degli eventi del mouse, e nel contesto questo è totalmente corretto.

Non conosco un modo più semplice per descriverlo, ma penso che sia importante averlo qui perché ho trovato questo thread entro un'ora dal primo incontro con il problema.

Sono sicuro al 98% che la stessa correzione funzionerà con le caselle di input e qualsiasi altra cosa. Intercetta gli eventi tattili ed elaborali separatamente senza lasciarli propagare o creare bolle, e considera di fare qualsiasi selezione dopo un piccolo timeout solo per assicurarti che Safari non riconosca la sequenza come il trigger della tastiera.

Vedo che qui le persone fanno cose strane con JavaScript o la funzione viewport e disattivano tutto lo zoom manuale sui dispositivi. Non dovrebbe essere una soluzione secondo me. L'aggiunta di questo frammento CSS disattiva lo zoom automatico in iOS senza modificare la dimensione del carattere in un numero fisso come 16px.

Per impostazione predefinita, utilizzo la dimensione del carattere 93,8% (15px) nei campi di input e aggiungendo il mio frammento CSS questo rimane al 93,8%. Non è necessario cambiare a 16px o renderlo un numero fisso.

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

Impostare una dimensione del carattere (per i campi di input) uguale alla dimensione del carattere del corpo, sembra essere ciò che impedisce al browser di ingrandire o ridurre. Suggerirei di utilizzare font-size: 1remcome soluzione più elegante.

Dato che lo zoom automatico (senza zoom out) sta ancora annonando su iPhone, ecco un JavaScript basato sul suggerimento di dlo che lavora con focus / blur.

Lo zoom viene disabilitato non appena viene inserito un input di testo e riattivato quando viene lasciato l'input.

Nota: alcuni utenti potrebbero non apprendere a modificare i testi con un piccolo input di testo! Pertanto, personalmente preferisco cambiare la dimensione del testo dell'input durante la modifica (vedi il codice sotto).

<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>

Il seguente codice cambierà la dimensione del testo di un input a 16 pixel (calcolata, cioè, nella dimensione dello zoom corrente) durante il focus dell'elemento. L'iPhone pertanto non eseguirà automaticamente lo zoom in avanti.

Nota: il fattore di zoom viene calcolato in base a window.innerWidth e al display dell'iPhone con 320 pixel. Questo sarà valido solo per iPhone in modalità verticale.

<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>

Mi ci è voluto un po 'per trovarlo, ma ecco il codice migliore che ho trovato ...... 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));
});

Basato sulla risposta di Stephen Walsh ... Questo codice funziona senza cambiare la dimensione del carattere degli input a fuoco (che sembra zoppo), inoltre funziona ancora con FastClick , che suggerisco di aggiungere a tutti i siti mobili per contribuire a rendere "scattante". Regola la "larghezza della finestra" in base alle tue esigenze.

// 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)
    });

Un commento per la risposta principale sull'impostazione della dimensione del carattere su 16px ha chiesto come sia una soluzione, e se si desidera un carattere più grande / più piccolo.

Non so tutti voi, ma usare px per le dimensioni dei caratteri non è il modo migliore per andare, dovreste usarli.

Ho riscontrato questo problema sul mio sito reattivo in cui il mio campo di testo è più grande di 16 pixel. Avevo il mio contenitore di moduli impostato su 2rem e il mio campo di input impostato su 1.4em. Nelle mie query mobili cambio la dimensione del carattere html a seconda della finestra. Poiché il codice HTML predefinito è 10, il mio campo di input viene calcolato su 28 px sul desktop

Per rimuovere lo zoom automatico ho dovuto modificare il mio input in 1.6em. Ciò ha aumentato la dimensione del mio carattere a 32 px. Solo leggermente più alto e appena percettibile. Sul mio iPhone 4 e 5 cambio la dimensione del carattere html a 15px per il ritratto e di nuovo a 10px per il paesaggio. Sembrava che il punto debole per quella dimensione di pixel fosse 48px, motivo per cui sono passato da 1,4em (42px) a 1,6em (48px).

La cosa che devi fare è trovare il punto debole sulla dimensione del carattere e quindi convertirlo all'indietro nelle dimensioni rem / em.

Ecco un trucco che ho usato su uno dei miei progetti:

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

Ho finito con gli stili e la scala iniziali che desideravo, ma senza zoom sulla messa a fuoco.