Estoy creando una página web para móviles que básicamente es una gran forma con varios cuadros de texto.

Sin embargo (al menos en mi móvil Android), cada vez que haga clic en alguna entrada de toda la página zoom allí, oscureciendo el resto de la página. Hay algo de HTML o CSS comando para deshabilitar este tipo de zoom en feira de páginas web?

  • Como Greg dijo anteriormente, si entro en un sitio web para móviles que desactiva el zoom, la primera cosa que suele hacer es pulsar el botón (a menos que sea algo realmente tengo a la vista), y estoy seguro de que no soy el único. Por otra parte, hablando desde mi experiencia, la mayoría de los sitios web que tienen zoom discapacitados también el uso de fuentes pequeñas, que como resultado hace que la lectura del texto difícil y muy incómodo.
  • Estoy de acuerdo en que no debería ser deshabilitado para la mayoría de los sitios, pero hay algunos casos de uso donde usted lo desea, puede desactivar el zoom predeterminado – tales como la web móvil de juegos donde usted lo desea, puede reemplazar el zoom para hacer algo más.
  • no — Si los usuarios quieren acercar a continuación, vamos a hacerlo. Además: Chrome tiene una opción para ignorar su petición.
  • Para Android los usuarios de Firefox, no es el Siempre Zoom para Firefox add-on. Muy recomendable.
  • De iOS 10, user-scalable=no es ignorado. Consulte este
  • Yo soy la desactivación de zoom para un lienzo de proyecto. Zoom podría estropear los algoritmos detrás de la animación. Estoy de acuerdo, los desarrolladores deben considerar la usabilidad antes de desactivar el zoom. Ajustar los tamaños de fuente y la estructura de la página en consecuencia. El vmin CSS unidad de medida es útil aquí. También recomiendo el uso de porcentajes y vh y vw.
  • Utilizamos un cromo navegador de control para nuestro quiosco de escritorio de la aplicación. Si los usuarios pueden hacer zoom de pellizco que puede llegar a hacer en un montón de problemas. Por desgracia, las soluciones de abajo no funciona para mí, y ahora estoy tratando de usar –disable-una pizca de comandos.

8 Comentarios

  1. 415

    Esto debería ser todo lo que usted necesita

    <meta 
         name='viewport' 
         content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
    />
    • esto también deshabilita la capacidad del usuario para hacer zoom en general, así como la capacidad del navegador para auto-ajustar la forma en que la página se adapta a la ventanilla – todos los Martin está buscando es una manera de desactivar el «zoom-de-entrada-haga clic en’ comportamiento.
    • Estoy de acuerdo con matt. Esto en realidad no responder a la pregunta, ¿qué pasa si quiero tener el zoom activado en general, no sólo en el foco de entrada…?
    • Ahora alguien en Posterous hizo que, a pesar de tener la fuente en 12 px por lo que es ilegible y no puedo encontrar una manera alrededor de ella.
    • no funciona en chrome en el Galaxy Nexus 4.1.1.
    • Sólo la primera línea. Y mover name=»viewport» a la línea de comienzo.
    • Cada persona con discapacidad visual, incluyéndome a mí, odia este más que nada. Tengo que llevar a la pantalla agarra de las páginas que hacen esto y luego les aplica el zoom en el visor de imágenes.
    • ¿Qué hace el segundo de la etiqueta meta de hacer? No es el width=device-width ya en la primera etiqueta meta?
    • Yo también me pregunto esto.
    • esto no parece funcionar en iOS 7. Ver lukad03 respuesta
    • Para iOS7 demasiado, reemplazar user-scalable=0 con el user-scalable=no.
    • Lo que funcionaría para iOS y Android?
    • Puede ser mejor para cambiar el tamaño de texto. Echa un vistazo a este sitio web: jonassebastianohlsson.com/blog/2013/11/25/…
    • Para alguien buscando este tema ahora, esto funcionó para mí. No afecta a mi versión del navegador en todos y desactiva el zoom completamente en mi versión móvil. Así como el molesto zoom cuando usted se centra en una entrada. (ios 9+)
    • Alguna ideea por qué esto no funciona para mí?

  2. 152

    Para aquellos de ustedes tarde a la fiesta, kgutteridge la respuesta no me funciona y Benny Neugebauer la respuesta incluye meta-densitydpi (un característica que está obsoleto).

    Sin embargo, esto no funciona para mí:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    • Esta es la respuesta correcta ahora. Las otras respuestas ya no funciona (al menos para iOS 7).
    • Alguien ha probado esta en iOS 10.x creo que no está funcionando?
    • No funciona con iOS 10 Safari
    • No funciona para mí. Se cambia el tamaño de todas las pantalla con la barra de desplazamiento y los malos zoom.
    • Todavía no funciona en Safari/iOS 11 debido a la SFB problema en Apple.
  3. 50

    Hay una serie de enfoques aquí – y a pesar de la posición es que normalmente los usuarios no debe ser restringido cuando se trata de zoom por motivos de accesibilidad, puede haber ocasiones en las que es necesario:

    Representar la página al ancho del dispositivo, no escala:

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

    Evitar la ampliación de la escala y evitar que el usuario sea capaz de zoom:

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

    La eliminación de todas zoom, todo el escalado

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    • «normalmente los usuarios no debe ser restringido», pero cuando el desarrollo de aplicaciones web para móviles que a menudo tienen que lidiar con el «zom-en el foco de entrada». Me parece útil para desactivar el zoom en ese caso.
  4. 39

    Puede utilizar:

    <head>
      <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
      ...
    </head>

    Pero por favor, tenga en cuenta que con Android 4.4 la propiedad objetivo-densitydpi ya no es compatible. Así que para Android 4.4 y versiones posteriores se proponen las siguientes mejores prácticas:

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
  5. 22

    Ya que aún no hay solución para el primer problema, aquí está mi puro CSS dos centavos.

    Navegadores móviles (la mayoría de ellos) requieren de tamaño de fuente en entradas de 16px. Así

    CSS:

    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"] {
      font-size: 16px;
    }

    se soluciona el problema. Así que no es necesario desactivar el zoom y suelta las características de accesibilidad de su sitio.

    Si su base de tamaño de fuente no es 16px o no 16px en los móviles, puede utilizar consultas de medios de comunicación.

    CSS:

    @media screen and (max-width: 767px) {
      input[type="text"],
      input[type="number"],
      input[type="email"],
      input[type="tel"],
      input[type="password"] {
        font-size: 16px;
      }
    }

    • ¿Por qué esta solución tiene tan pocos votos? Es por lejos la mejor manera de evitar la forma-haga clic en zoom.
    • Sí; esta solucionado mi problema! Yo no quiero desactivar el zoom completamente y esto era justo lo que necesitaba.
  6. 9

    por favor, pruebe a añadir esta meta-etiqueta y estilo

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    
    
    <style>
    body{
            touch-action: manipulation;
        }
    </style>
  7. 2

    Posible Solución para Aplicaciones Web: Mientras que el zoom no puede ser deshabilitado en iOS Safari más, que será desactivado cuando se abra el sitio desde una pantalla de inicio acceso directo.

    Añadir estas etiquetas meta para declarar su Aplicación como «Web App capaz de»:

        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
        <meta name='apple-mobile-web-app-capable' content='yes' />

    Sin embargo sólo utilizar esta función si su aplicación es autosuficiente, como los botones adelante/atrás y la barra de URL, así como el intercambio de las opciones están desactivadas. (Todavía se puede deslizar hacia la izquierda y la derecha, aunque) Este enfoque, sin embargo, permite bastante la aplicación de ux. La pantalla completa del navegador sólo se inicia cuando se carga el sitio de la pantalla de inicio. Yo también tengo que trabajar después de que yo incluido un apple-touch-icon-180×180.png en mi carpeta raíz.

    Como un bono, usted probablemente también desee incluir una variante de este, así:

    <meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>
  8. 1

    Usted puede realizar la tarea, simplemente agregando el siguiente ‘meta’ elemento en su ‘jefe’:

    <meta name="viewport" content="user-scalable=no">

    De añadir todos los atributos como ‘ancho’,’iniciales ‘ escala’, ‘máximo ancho’, ‘máximo’ a escala no podría funcionar. Por lo tanto, sólo tiene que añadir el elemento.

Dejar respuesta

Please enter your comment!
Please enter your name here