Quiero que mi página web a pantalla completa y desactivar el zoom en todos los dispositivos móviles.

Con la etiqueta meta:

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

Soy capaz de hacer esto para iPhone/iPad, pero en los dispositivos Android, el sitio web está ampliado a cerca de 125%.

Si puedo usar la etiqueta

<meta name="viewport" content="width=max-device-width, user-scalable=no">

Puedo obtener el resultado opuesto. Así funciona en Android, pero no funciona en el iPad/iPhone.

  • Jajaja 🙂 esa es la manera que yo lo veo ahora… Y también resultó ser mi solución en aquel entonces. En estos primeros días de respuesta de los sitios no se sentía que esta idea de que el zoom debe ser desactivado…
  • Los desarrolladores, por favor NO HAGA ESTO! Esto puede hacer que su sitio completamente INSERVIBLE para personas con problemas de vista! Acaba de construir para la vista de zoom-out, pero dejar que la gente de zoom. La función está ahí por una razón!
InformationsquelleAutor Coen Ponsen | 2012-07-05

12 Comentarios

  1. 83

    Desafortunadamente, cada navegador tiene su propia implementación de la ventanilla de la etiqueta meta. Diferentes combinaciones de trabajo en los diferentes navegadores.

    Android 2.2: área de visualización de la etiqueta meta no parece estar apoyado en todo.

    Android 2.3.x/3.x: Mediante el establecimiento de user-scalable=no de deshabilitar el ajuste de escala de la ventana gráfica de la etiqueta meta de sí mismo. Esta es probablemente la razón por la que su ancho opción no tiene ningún efecto. Para permitir que el navegador a escala de su contenido, es necesario establecer user-scalable=sí, a continuación, deshabilitar esta función usted puede establecer el mínimo y el máximo de la escala para el mismo valor por lo que no se puede reducir o aumentar. Juguete con la escala inicial hasta que su sitio se ajusta perfectamente.

    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />

    Android 4.x: la Misma regla se aplique como 2.3.x, excepto el min y max escalas no son honrados y si uso user-scalable=sí el usuario siempre puede el zoom, si se establece en » no » significa su propia escala es ignorado, este es el problema que estoy enfrentando ahora que me atrajo a esta pregunta… parece Que no puede desactivar el zoom y la escala, al mismo tiempo, en 4.x.

    iOS/Safari (4.x/5.x prueba): Escalas de trabajo como se espera, puede desactivar el escalado con user-scalable=0 (palabras clave) sí/no no trabajo en 4.x). iOS/Safari también no tiene el concepto de destino-densitydpi así que usted debe dejar que fuera para evitar errores. Usted no necesita min y max ya que se puede desactivar el zoom en la forma esperada. Sólo uso ancho o te quedarás en el iOS orientación error

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

    Chrome: Escalas de trabajo como se esperaba y como lo hacen en iOS, min y max son honrados y usted puede desactivar el zoom mediante el uso de user-scalable=no.

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

    Conclusión: Usted puede utilizar algunos bastante simple JS para establecer el contenido en consecuencia después de algunos conceptos básicos de navegador/dispositivo de detección. Sé que este tipo de detección es mal visto, pero en este caso es casi inevitable porque cada proveedor se ha ido y hacer su propia cosa! Espero que esta ayuda a las personas que luchan contra la ventanilla, y si alguien tiene una solución para desactivar el zoom en Android 4.x SIN el uso de la ventanilla, por favor hágamelo saber.

    [EDITAR]

    Android 4.x navegador Chrome (que creo que es pre-instalado en la mayoría de los países): asegúrese de Que el usuario no puede el zoom y la página a pantalla completa. La desventaja: usted tiene que asegurarse de que el contenido tiene un ancho fijo. Yo no he probado esto en la parte inferior de versiones de Android. Para hacer esto, vea el ejemplo:

    <meta name="viewport" content="width=620, user-scalable=no" />

    [EDIT 2]

    iOS/Safari 7.1: Desde la v7.1, Apple ha introducido una nueva bandera para el área de visualización de la etiqueta meta de llamada minimal-ui. Para ayudar con las apps a pantalla completa, esto oculta la barra de direcciones y la barra de herramientas inferior para una vista de pantalla completa (no se muy bien a Pantalla Completa de la API, pero de cerca y no requiere de la aceptación por el usuario). No viene con sus parte justa de los insectos, así y no funciona en iPads.

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

    [EDITAR 3]

    iOS/Safari 8 Beta 4: El área de visualización de la etiqueta meta de minimal-ui mencionado en EDITAR 2 ha sido retirada por Apple en esta versión. Fuente – WebKit Notas

    • Gracias por el artículo útil. Yo estaba luchando con chrome en android. Para el Android 4.x stock navegador, podemos solucionar el mencionado problema mediante el establecimiento de un ancho de ventana en píxeles. Supongamos que usted desea una escala fija de 1.3, el área de visualización witdh debe ser de Matemáticas.piso((la pantalla.availWidth * 10) / 13). Podemos poner ese número en una cookie, entonces la fuerza que una carga para permitir que el servidor de código para establecer la correcta etiqueta meta.
    • por favor, proporcione esta secuencia de comandos de enfoque que has mencionado…
  2. 4

    HTML

    <head>
        <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
    </head>

    jQuery

    Opción 1:

    $('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');

    Opción 2:

    var deviceSpecific = {
        iPad: 'width=1165,user-scalable=no'
    };
    if(navigator.userAgent.match(/iPad/i){
        $('meta[name=viewport]').attr('content',deviceSpecific.iPad);
    }

    Opción dos, siendo un poco más de un último recurso si usted está encontrando inconsistencia.

    • Hola gracias por tu respuesta. Traté de que: En Android todavía no mostrar la página completa y zoom todavía está habilitado. En el ipad también se amplía casi cabe en la pantalla, pero si puedo cambiar de horizontal a vertical o viceversa mantiene esa resolución… No es bueno comprobar por ti mismo..
    • No tengo acceso a iToys en casa, pero viendo que ya estás usando jQuery,este debe responder a su pregunta aunque probablemente hay una forma más eficiente…
  3. 3

    Simplemente uso:

    <meta name="HandheldFriendly" content="True" />

    Funciona bien en mi Samsung Note II y el Deseo de HTC.

    • esto funciona para android el navegador chrome, en mi caso chrome no detectar la ventanilla sin añadir esta etiqueta meta
  4. 2

    Para Apple dispositivos es muy fácil:

    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />

    La primera etiqueta de ejecutar la aplicación web en modo de pantalla completa cuando se abre a través de un icono de acceso directo se coloca en el iPhone/iPod/iPad pantalla de inicio.

    La segunda etiquetas solo funciona en combinación con el primero. Los valores posibles son: por defecto, el negro y el negro translúcido.

    La tercera etiqueta bloquea el sitio de ancho a su tamaño estándar (1.0) y no permite hacer zoom.

    NOTA: como el «apple-mobile» meta tags son ignorados en la no-dispositivos de Apple, y el 3º de la etiqueta de oficial en HTML5, usted puede hacer uso de todos ellos juntos.

    Para Android usted no tiene una solución global, ya que no todo el mundo usa el valor predeterminado de android webbrowser. Ver Pantalla completa en la Web de la Aplicación para Android

    Aquí algunos otros enlaces útiles:

    Consejos para iOS:
    http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

    Todos los oficiales y no oficiales conocido meta: https://gist.github.com/kevinSuttle/1997924

  5. 2

    Tengo un Samsung Galaxy Note 4 y el uso chrome como mi navegador. Me pareció ignorar el área de visualización de etiquetas meta, tengo que trabajar con HandheldFriendly. Terminé con una etiqueta meta combo. A mi me funciona en Android y iOS.

    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=YOUR_SITE_WIDTH">
  6. 1

    Android se fija a partir de la versión 4.4.2

    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
  7. 0

    Yo estaba teniendo todo tipo de problemas con esto y que incluso comenzó a construir un navegador, sistema de detección de entregar diferentes ventanilla etiquetas para los diferentes navegadores. Entonces me decidí a tratar de simplificar lo que estaba haciendo y de todo lo trabajado. Establecer el área de visualización para el ancho que desea que su sitio sea y a pie de todo lo que está trabajando ahora.

    <meta name="viewport" content="width=1165 />
  8. 0

    Para lo que vale, aquí es lo que he usado para obtener una de 1024px de ancho de página de contenido para ir exactamente a pantalla completa en mi Nexus 7 (Android 4.2.2)/Chrome, paisaje, sólo que sin tener que recurrir a javascript*:

    width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no

    (Creo que el user-scalable=no, en realidad niega el min- & max-escala, aunque). Tengo el .94 valor por ensayo y error, no por ningún tipo de cálculo invocando dispositivo de densidad de píxeles, o algo como eso.

    *es decir, a fuerza de contenidos ancho para que coincida con ventana, hice uso de js para condicionalmente escribir la ventanilla contenido de metadatos.

  9. 0
    <meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
  10. 0

    Se utilizó el siguiente código Javascript en la cabecera para establecer la meta tags:

    <script>
      if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) {
        document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); //or whichever meta tags make sense for your site
      } else {
        document.write("<meta name='viewport' content='width=max-device-width, user-   scalable=no'>"); //again, which ever meta tags you need
      }
    </script>

    Puede agregar condiciones adicionales y establecer para sus necesidades específicas.

  11. 0

    La siguiente sugerencia de Dan B ha trabajado muy bien para mí, he tenido todo tipo de problemas tratando de conseguir mi sitio para cargar a la derecha en android, y esto se ha resuelto. Por ahora de todos modos!

    <meta name="viewport" content="width=YOUR_SITE_WIDTH"/>

    Gracias!

  12. 0

    Estoy usando este código para prevenir el zoom en el iPhone y el problema se solucionó, pero surge otro problema; cuando hago clic en el campo de entrada de toda la ventana salta para arriba, a continuación, define su posición normal, al pulsar el botón go mismo comportamiento se produce y windows saltos. tengo que deshacerme de saltar, así que sólo la ventana cambia de tamaño normal ubicación.

    function zoomDisable(){
      $('head meta[name=viewport]').remove();
      $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
    }

Dejar respuesta

Please enter your comment!
Please enter your name here