Galería de imágenes completa de la página web y del zoom inhabilitado para todos los navegadores móviles

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

Con la metaetiqueta:

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

Puedo hacer esto para el iPhone / iPad, pero en los dispositivos androides el Web site es acercado a cerca de 125%.

Si utilizo la etiqueta

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

Tengo el resultado opuesto. Así que funciona en Android, pero no funciona en iPad / iPhone.

Desafortunadamente cada navegador tiene su propia implementación de la metaetiqueta de vista. Diferentes combinaciones funcionarán en diferentes navegadores.

Android 2.2 : la metaetiqueta de vista no parece estar soportada en absoluto.

Android 2.3.x / 3.x : Al establecer user-scalable = no, también deshabilita el escalado de la metaetiqueta de viewport. Esta es probablemente la razón por la que su opción de ancho no tiene ningún efecto. Para permitir que el navegador reduzca su contenido, debe configurar user-scalable = yes y , a continuación, para desactivar el zoom, puede ajustar la escala min y max al mismo valor para que no pueda encogerse o crecer. Juguete con la escala inicial hasta que su sitio encaje cómodamente.

 <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 aplica como 2.3.x excepto que las escalas mínimas y máximas ya no se cumplen y si se utiliza user-scalable = yes el usuario siempre puede hacer zoom, estableciéndolo en 'no' significa que su propia escala es ignorada, Este es el problema que estoy enfrentando ahora que me atrajo a esta pregunta … No se puede parecen desactivar el zoom y la escala al mismo tiempo en 4.x.

IOS / Safari (4.x / 5.x probado) : Las escalas funcionan como se esperaba, puede desactivar la escala con scalable = 0 (las palabras clave sí / no no funcionan en 4.x). IOS / Safari también no tiene concepto de target-densitydpi por lo que debe dejar que fuera para evitar errores. No es necesario min y max ya que puede desactivar el zoom de la manera esperada. Sólo utilice el ancho o se ejecutará en el error de orientación de iOS

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

Chrome : Las escalas funcionan como se espera, como lo hacen en iOS, min y max se respetan y se puede desactivar el zoom utilizando 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 : Puede utilizar algunos JS bastante simple para configurar el contenido en consecuencia después de una detección básica de navegador / dispositivo. Sé que este tipo de detección es mal visto, pero en este caso es casi inevitable porque cada vendedor ha ido y hecho su propia cosa! Espero que esto ayude a las personas que luchan contra el viewport, y si alguien tiene una solución para deshabilitar el zoom en Android 4.x SIN el uso de la ventana de visualización, por favor hágamelo saber.

[EDITAR]

Android 4.x Chrome navegador (que creo que está preinstalado en la mayoría de los países): Usted puede asegurarse de que el usuario no puede ampliar y la página es de pantalla completa. La desventaja: usted tiene que asegurarse de que el contenido tiene un ancho fijo. No he probado esto en versiones inferiores de Android. Para ello, consulte el ejemplo:

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

[EDIT 2]

IOS / Safari 7.1 : Desde v7.1, Apple ha introducido un nuevo indicador para la metaetiqueta de viewport llamada minimal-ui . Para ayudar con las aplicaciones de pantalla completa, esto oculta la barra de direcciones y la barra de herramientas inferior para una experiencia de pantalla completa (no completamente API de pantalla completa pero cercana y no requiere aceptación por parte del usuario). Lo hace viene con su parte justa de los errores también y no funciona en iPads.

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

[EDIT 3]

IOS / Safari 8 Beta 4 : La meta-etiqueta de visor minimal-ui mencionada en EDIT 2 ya ha sido eliminada por Apple en esta versión. Origen – Notas de WebKit

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'); 

Opcion 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 es un poco más de un último recurso si estás encontrando inconsistencia.

Simplemente utilice:

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

Funciona bien en mi Samsung Note II y HTC Desire.

Para los dispositivos de Apple es 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 ejecuta la aplicación web en modo de pantalla completa cuando la abre mediante un icono de acceso directo situado en la pantalla principal de iPhone / iPod / iPad.

La segunda etiqueta sólo funciona en conjunción con la primera. Los valores posibles son: predeterminado, negro y negro-translúcido.

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

NOTA: como las metaetiquetas "apple-mobile" se ignoran en dispositivos que no son de Apple y la etiqueta 3ª es oficial en HTML5, puede usarlas todas juntas.

Para Android no tienes una solución global, ya que no todo el mundo utiliza el navegador predeterminado android. Ver la aplicación web de pantalla completa para Android

Aquí algunos otros enlaces útiles:

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

Todo el meta oficial y no oficial conocido: https://gist.github.com/kevinSuttle/1997924

Tengo un Samsung Galaxy Note 4 y uso cromo como mi navegador. Descubrí que estaba ignorando las etiquetas meta de la ventana gráfica, lo consiguió para trabajar con HandheldFriendly. Acabé con un combo meta-tag. Funciona para mí en Android e iOS.

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

Android lo arregló desde 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" /> 

Tenía todo tipo de problemas con esto e incluso comenzó a construir un sistema de detección de navegador para entregar diferentes etiquetas de visor a diferentes navegadores. Entonces decidí intentar simplificar lo que estaba haciendo y todo funcionó. Establecer la ventana de visualización para el ancho que desea que su sitio para ser y caminar todo está funcionando ahora.

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

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

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

(Creo que el usuario escalable = no realmente niega la escala min- y max, aunque). Tengo el valor .94 por ensayo y error, no por cualquier tipo de cálculo que invoca la densidad de píxeles del dispositivo o algo así.

* Es decir, para forzar el ancho del contenido a coincidir con la ventana – Hice uso js para condicionalmente escribir el meta contenido de la ventana de visualización.

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

Utilizamos el siguiente Javascript en el encabezado para establecer las etiquetas de meta:

 <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 configurarlas para sus necesidades específicas.

La siguiente sugerencia de Dan B ha funcionado muy bien para mí, he estado teniendo todo tipo de problemas tratando de conseguir mi sitio para cargar directamente en android, y esto lo ha ordenado. Por ahora de todos modos!

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

¡Gracias!

Estoy utilizando este código para evitar el zoom en el iPhone y el problema se resolvió, pero surge otro problema; Cuando hago clic en el campo de entrada toda la ventana salta y luego establece su posición a la normalidad, cuando presioné el botón de ir el mismo comportamiento se produce y saltos de las ventanas. Tengo que deshacerse de saltar de modo que sólo la ventana se redimensiona a la ubicación normal.

 function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />'); } 
  • Compartir el libro de contactos de la aplicación java con CardDAV
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.