javascript - con - Evite que el iPhone amplíe `seleccionar` en la aplicación web

ionic web

Question

Tengo este código:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

Correr en una aplicación web de pantalla completa en iPhone.

Al seleccionar algo de esta lista, el iPhone amplía el elemento select . Y no vuelve a alejarse después de seleccionar algo.

¿Cómo puedo prevenir esto? ¿O retroceder?

Answer 1

user-scalable = no es lo que necesita, solo para que haya una respuesta definitiva a esta pregunta

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

Answer 2

No creo que no puedas hacer nada sobre el comportamiento de forma aislada.

Una cosa que puedes intentar es evitar que la página se acerque. Esto es bueno si su página está diseñada para el teléfono.

<meta name="viewport" content="width=device-width" />

Otra cosa que podría intentar es usar una construcción de JavaScript en lugar de la declaración genérica de "seleccionar". Cree un div oculto para mostrar su menú, procese los clics en javascript.

¡Buena suerte!

Answer 3

Prueba esto:

function DisablePinchZoom() 
{
    $(''meta[name=viewport]'').attr("content", "");
    $(''meta[name=viewport]'').attr("content", "width=yourwidth, user-scalable=no");
}

function myFunction() 
{
    $(''meta[name=viewport]'').attr("content", "width=1047, user-scalable=yes");
}


<select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
</select>

DisablePinchZoom se disparará antes del cambio, por lo que el zoom se desactivará en el momento en que se active el intercambio. En la función onchange, al final puede restaurar la situación inicial.

Probado en un iPhone 5S

Answer 4

Probablemente se deba a que el navegador está intentando ampliar el área, ya que el tamaño de la fuente es inferior al umbral, por lo general, esto sucede en el iPhone.

Dar un atributo de metaetiqueta "user-escalable = no" restringirá al usuario de hacer zoom en otro lugar. Como el problema es solo con un elemento seleccionado , intente utilizar lo siguiente en su CSS, este truco se usa originalmente para jquery mobile.

HTML:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

CSS:

select{
font-size: 50px;
}

src: unzoom después de seleccionar en iphone

Answer 5

iPhone ampliará ligeramente los campos de formulario si el texto está configurado a menos de 16 píxeles . Sugeriría que el texto del campo del formulario móvil sea de 16 píxeles y luego anule el tamaño para el escritorio.

Las respuestas que dicen que deshabilitar el zoom son inútiles para los usuarios con vista parcial que aún pueden querer hacer zoom en dispositivos móviles más pequeños.

Ejemplo:

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

# Tablet upwards
@media (min-width: 768px) {
  font-size: 14px;
}

Answer 6

Esto pareció funcionar para mi caso al abordar este problema:

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

Sugerido aquí por Christina Arasmo Beymer