android - para - viewport definicion
Páginas web completas y metaetiqueta de zoom deshabilitado para todos los navegadores móviles (12)
Quiero que mi página web sea pantalla completa y desactivar el zoom en todos los dispositivos móviles.
Con la metaetiqueta:
<meta name="viewport" content="width=1165, user-scalable=no">
Puedo hacer esto para iPhone / iPad, pero en dispositivos Android el sitio web tiene un zoom de aproximadamente 125%.
Si uso la etiqueta
<meta name="viewport" content="width=max-device-width, user-scalable=no">
Obtengo el resultado opuesto. Entonces funciona en Android pero no funciona en iPad / iPhone.
Android lo arregló 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" />
Estoy usando este código para evitar el zoom en el iPhone y se resolvió el problema, pero surge otro problema; cuando hago clic en el campo de entrada toda la ventana salta y luego establece su posición en normal, cuando presiono el botón de ir, se produce el mismo comportamiento y las ventanas saltan. Necesito deshacerme del salto para que solo la ventana cambie de tamaño 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" />'');
}
La siguiente sugerencia de Dan B me ha funcionado muy bien, he tenido todo tipo de problemas al intentar que mi sitio se cargue directamente en Android, y esto lo ha solucionado. Por ahora de todos modos!
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
¡Gracias!
Lamentablemente, cada navegador tiene su propia implementación de la metaetiqueta de la ventana gráfica. Diferentes combinaciones funcionarán en diferentes navegadores.
Android 2.2 : la metaetiqueta de viewport no parece ser compatible.
Android 2.3.x / 3.x : Al configurar user-scalable = no, usted también inhabilita la escala de la metaetiqueta viewport. Esta es probablemente la razón por la cual su opción de ancho no tiene ningún efecto. Para permitir que el navegador escale su contenido, debe configurar user-scalable = yes , luego, para deshabilitar el zoom, puede establecer la escala mínima y máxima en el mismo valor para que no se reduzca o crezca. Juguete con la escala inicial hasta que su sitio se ajuste 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ín. Y máx. Ya no se respetan y si usa user-escalable = sí, el usuario siempre puede acercar, estableciendo que ''no'' significa que su propia escala es ignorada, este es el problema que estoy enfrentando ahora que me llevó a esta pregunta ... Parece que no se puede deshabilitar 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 deshabilitar las escalas con user-escalable = 0 (las palabras clave sí / no no funcionan en 4.x). iOS / Safari tampoco tiene ningún concepto de target-densitydpi, por lo que debes dejarlo para evitar errores. No necesita mín. Y máx. Ya que puede apagar el zoom de la manera esperada. Solo use ancho o se encontrará con 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, se respetan los mínimos y máximos y puede desactivar el zoom utilizando user-escalable = 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 usar algunos JS bastante simples para configurar el contenido en consecuencia después de una detección básica de navegador / dispositivo. Sé que este tipo de detección está mal visto, pero en este caso es casi inevitable porque cada proveedor se ha ido y ha hecho lo suyo. Espero que esto ayude a las personas a luchar contra la ventana gráfica, y si alguien tiene una solución para deshabilitar el zoom en Android 4.x SIN el uso de la ventana gráfica, házmelo saber.
[EDITAR]
Navegador Chrome Android 4.x (que creo que está preinstalado en la mayoría de los países): puede asegurarse de que el usuario no pueda hacer zoom y que la página sea a pantalla completa. Lo malo: debes asegurarte de que el contenido tenga un ancho fijo. No he probado esto en versiones inferiores de Android. Para hacer esto, vea el ejemplo:
<meta name="viewport" content="width=620, user-scalable=no" />
[EDIT 2]
iOS / Safari 7.1 : desde v7.1, Apple ha introducido una nueva marca para la metaetiqueta de ventana gráfica 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 del todo la API de pantalla completa, pero se cierra y no requiere la aceptación del usuario). Viene con una buena cantidad de errores 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 metaetiqueta de viewport minimal-ui mencionada en EDIT 2 ahora ha sido eliminada por Apple en esta versión. Fuente - Notas de WebKit
Para dispositivos 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 ubicado en la pantalla de inicio del iPhone / iPod / iPad.
Las segundas etiquetas solo funcionan 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 acercamiento.
NOTA: como las metaetiquetas "apple-mobile" se ignoran en dispositivos que no son de Apple y la 3ª etiqueta es oficial en HTML5, puede usarlas todas juntas.
Para Android, no tiene una solución global, ya que no todo el mundo usa el navegador web android predeterminado. 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 conocido oficial y no oficial: https://gist.github.com/kevinSuttle/1997924
Por lo que vale, aquí está lo que solía obtener una página de contenido de 1024 píxeles de ancho para pasar exactamente a pantalla completa en mi Nexus 7 (Android 4.2.2) / Chrome, solo 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 en realidad niega la escala mínima y máxima). Obtuve el valor .94 por prueba y error, no por ningún tipo de cálculo que invoque la densidad de píxeles del dispositivo ni nada por el estilo.
* es decir, para forzar el ancho del contenido para que coincida con la ventana, usé js para escribir condicionalmente el meta contenido de la ventana gráfica.
Simplemente use:
<meta name="HandheldFriendly" content="True" />
Funciona bien en mi Samsung Note II y HTC Desire.
Tenía todo tipo de problemas con esto e incluso comencé a construir un sistema de detección de navegador para entregar diferentes etiquetas de vistas a diferentes navegadores. Entonces decidí intentar simplificar lo que estaba haciendo y todo funcionó. Establezca la ventana gráfica en el ancho que desea que sea su sitio y aléjese, todo está funcionando ahora.
<meta name="viewport" content="width=1165 />
Tengo un Samsung Galaxy Note 4 y uso Chrome como mi navegador. Descubrí que estaba ignorando las metaetiquetas de la ventana gráfica, y funcionó con HandheldFriendly. Terminé con un combo de etiqueta meta. 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">
Usamos el siguiente JavaScript en el encabezado para establecer las metaetiquetas:
<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.
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);
}
La opción dos es un poco más de último recurso si encuentra incoherencia.
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>