olvide - ¿Evitar que iPhone se acerque a la forma?

nfc iphone 7 como activar

Question

El código:

<select>
    <option value="1">Home</option>
    <option value="2">About</option>
    <option value="3">Services</option>
    <option value="4">Contact</option>
</select>

Cuando toco select , el iPhone amplía ese elemento (y no se aleja después de deseleccionar).

¿Cómo puedo prevenir esto? ¿O retroceder? No puedo usar user-scalable=no porque realmente necesito esa funcionalidad. Es para iPhone, selecciona el menú.

Answer 1

Acabo de encontrar una solución simple si estás usando Bootstrap:

Como se menciona en w3s: puede ajustar rápidamente el tamaño de las etiquetas y los controles de forma dentro de la forma Horizontal al agregar .form-group-lg al elemento.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="control-label">Large Label</label>
    <div>
      <input class="form-control" type="text">
    </div>
  </div>

Vea el segundo ejemplo en esta página: http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp

¡Lo probé en Safari y Chrome en un iPhone SE y funciona como un encanto!

Answer 2

Así que aquí está la solución final que funciona bien para mí.

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

Answer 3

Establecer el tamaño de fuente funciona perfectamente para los elementos de entrada, pero no para los elementos de selección para mí. Para las etiquetas de selección, necesito desactivar activamente el zoom de la ventana gráfica cuando el usuario comienza a interactuar con el elemento de selección, y luego volver a habilitarlo para finalizar.

//the mousedown event seems to be the one that does the trick, versus ''focus'', because focus fires after the zoom already happens.
$(''select'').mousedown(function(){
  $(''meta[name=viewport]'').remove();
  $(''head'').append(''<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">'');
})

$(''select'').focusout(function(){
  $(''meta[name=viewport]'').remove();
  $(''head'').append(''<meta name="viewport" content="width=device-width, initial-scale=yes">'' );
})

Answer 4

Esto podría ser útil para ver:

Deshabilitar Zoom automático en la etiqueta de entrada "Texto" - Safari en iPhone

Básicamente, necesitaría capturar el evento de tocar en un elemento de formulario, luego no ejecutar la acción predeterminada de iOS para acercar, pero aún así permitirle hacer zoom para el resto de la página.

Editar:

El enlace menciona,

2) Puede cambiar dinámicamente la etiqueta de la ventana META utilizando javascript (consulte Activar / desactivar el zoom en el safari de iPhone con Javascript?)

Elaborar:

1. La metaetiqueta de Viewport está configurada para permitir el zoom
2. El usuario toca el elemento del formulario, cambia la metaetiqueta para deshabilitar el zoom
3. Al presionar listo, la ventana gráfica se cambia para permitir el zoom

Y si no puede cambiar la etiqueta al hacer clic en un elemento del formulario, coloque un div que imite el elemento del formulario que, al presionarlo, cambia la etiqueta y luego invoca la entrada.

Answer 5

Esto puede evitarse configurando font-size: 16px en todos los campos de entrada.

Answer 6

La respuesta más votado para establecer el tamaño de fuente no funciona para mí. Usando javascript para identificar al cliente junto con las metaetiquetas en las respuestas aquí, podemos evitar el enfoque de zoom del enfoque de entrada de iPhone mientras de otro modo mantenemos la funcionalidad de acercamiento intacta.

$(document).ready(function ()
{
    if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
    {
        $(document).on("focus", "input, textarea, select", function()
        {
            $(''meta[name=viewport]'').remove();
            $(''head'').append(''<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">'');
        });

        $(document).on("blur", "input, textarea, select", function()
        {
            $(''meta[name=viewport]'').remove();
            $(''head'').append(''<meta name="viewport" content="width=device-width, initial-scale=1">'');
        });
    }
});

Parece que tenemos que reemplazar la metaetiqueta con nuevos valores en el evento blur, solo para eliminarlo no parece desencadenar un comportamiento actualizado.

Tenga en cuenta que la IU todavía está inicializando el zoom, pero se aleja rápidamente de nuevo. Creo que esto es aceptable y los usuarios de iPhone ya deben estar acostumbrados a que el navegador tenga un zoom dinámico funcionando de todos modos en los escenarios aplicables.

Answer 7

Para iOS, puede evitar el acercamiento de elementos de entrada simplemente asignando un tamaño de fuente que el sistema operativo considere suficiente (> = 16px), evitando así la necesidad de hacer zoom, por ejemplo:

input, select, textarea {
    font-size: 16px;
}

Es una solución también utilizada por varios frameworks y le permite evitar el uso de una metaetiqueta.

Answer 8

aquí está la solución de jQuery que funciona bien para mí.

device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$(''head'').append(''<style type="text/css">input,  select, textarea {font-size: 16px;}</style>'');
}

Answer 9

ACTUALIZACIÓN : Este método ya no funciona en iOS 10.

Depende del Viewport, puedes deshabilitarlo de esta manera:

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

agregue user-scalable=0 y también debería funcionar en sus entradas.

Answer 10

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

Ya no funciona en iOS10.0.1

font-size:16px funciona