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>
Se ejecuta en una aplicación web de pantalla completa en iPhone.
Al seleccionar algo de esta lista, el iPhone selectamplía el elemento-. Y no se aleja después de seleccionar algo.
¿Cómo puedo prevenir esto? ¿O alejar la imagen?
Respuestas:
Probablemente se deba a que el navegador está intentando hacer zoom en el área, ya que el tamaño de la fuente es menor que el umbral, esto generalmente sucede en el iPhone.
Dar un atributo de metaetiqueta "user-scalable = no" impedirá que el usuario haga zoom en otros lugares. Dado que el problema es solo con el elemento seleccionado , intente usar lo siguiente en su css, este truco se usó 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;
}
$('<meta>', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');
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">
minimum-scale=1, lo que también preserva la posibilidad del usuario de hacer zoom.
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
El iPhone ampliará ligeramente los campos del formulario si el texto está configurado en menos de 16 píxeles . Sugeriría configurar el texto del campo del formulario móvil en 16 píxeles y luego anular el tamaño hacia abajo para el escritorio.
Las respuestas que dicen que deshabilitar el zoom no son útiles para los usuarios deficientes visuales que aún pueden querer hacer zoom en móviles más pequeños.
Ejemplo:
# Mobile first
input, textarea, select {
font-size: 16px;
}
# Tablet upwards
@media (min-width: 768px) {
font-size: 14px;
}
Llego un poco tarde a la fiesta, pero encontré una solución bastante ordenada que resuelve este problema solo con la manipulación de CSS. En mi caso, no pude cambiar el tamaño de la fuente por motivos de diseño, y tampoco pude desactivar el zoom.
Dado que el iPhone ampliará ligeramente los campos del formulario si el texto está configurado en menos de 16 píxeles, podemos engañar al iPhone para que piense que el tamaño de fuente es de 16 píxeles y luego transformarlo a nuestro tamaño.
Por ejemplo, tomemos el ejemplo cuando nuestro texto es de 14px, entonces hace zoom porque es menor que 16px. Por lo tanto, podemos transformar la escala, según 0.875.
En el siguiente ejemplo, agregué el relleno para mostrar cómo convertir otras propiedades en consecuencia.
.no-zoom {
font-size: 16px;
transform-origin: top left;
transform: scale(0.875); // 14px / 16px
padding: 4.57px; // 4px / 0.875
}
¡Espero que ayude!
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 activará antes del cambio, por lo que el zoom se desactivará en el momento en que se active el cambio. En la función onchange, al final puede restaurar la situación inicial.
Probado en un iPhone 5S
iOS amplía la página para mostrar un campo de entrada más grande si su tamaño de fuente es inferior a 16 px.
sólo al hacer clic en cualquier campo, se amplía la página. así que al hacer clic, lo hacemos como 16px y luego cambiamos al valor predeterminado
el siguiente fragmento me funciona bien y está orientado a dispositivos móviles,
@media screen and (max-width: 767px) {
select:active, input:active,textarea:active{
font-size: 16px;
}
}No creo que no puedas hacer nada sobre el comportamiento de forma aislada.
Una cosa que puede 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 "select". Cree un div oculto para mostrar su menú, procese los clics en javascript.
¡Buena suerte!
Como se responde aquí: deshabilite el zoom automático en la etiqueta "Texto" de entrada - Safari en iPhone
Puede evitar que Safari se acerque automáticamente a los campos de texto durante la entrada del usuario sin deshabilitar la capacidad del usuario para pellizcar el zoom. Solo agregamaximum-scale=1 pero omita el atributo de escala de usuario sugerido en otras respuestas.
Es una opción que vale la pena si tiene un formulario en una capa que "flota" alrededor si se amplía, lo que puede hacer que los elementos importantes de la interfaz de usuario se muevan fuera de la pantalla.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Intente agregar este CSS para deshabilitar el estilo predeterminado de Ios:
-webkit-appearance: none;
Esto también funcionará en otros elementos que tengan un estilo especial, como input [type = search].
He estado leyendo durante unas horas sobre esto y la mejor solución es este jquery aquí. Esto también ayuda con la opción "siguiente pestaña" en iOS Safari. También tengo entradas aquí, pero siéntase libre de eliminarlas o agregarlas como desee. Básicamente, el mousedown se dispara antes del evento de enfoque y engaña al navegador para que piense en 16px. Además, el focusout se activará en la función "siguiente pestaña" y repetirá el proceso.
$(function(){
$('input, select').on("mousedown focusout", function(){
$('input, select').css('font-size','16px');
});
$('input, select').on("focus", function(){
$('input, select').css('font-size','');
});
})