Página web completa y metadato de viewport de zoom deshabilitado 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.Página web completa y metadato de viewport de zoom deshabilitado para todos los navegadores 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á ampliada a aproximadamente 125%.

Si utilizo la etiqueta

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

puedo obtener el resultado opuesto. Entonces funciona en Android pero no funciona en iPad/iPhone.

Fuente

2012-07-05 Coen Ponsen

+11

Te odio por deshabilitar mi zoom. Honestamente. –

Hahaha :) Así es como lo veo ahora ... Y también resultó ser mi solución en aquel entonces.En estos primeros días de sitios sensibles, sentí la idea de que el zoom debería deshabilitarse ... –

Desarrolladores, ¡POR FAVOR, NO HAGA ESTO! ¡Esto puede hacer que su sitio sea completamente inutilizable para personas con problemas de visión! Solo cree para la vista alejada, pero permita que la gente haga zoom. ¡La función está ahí por una razón! – rickythefox

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

La opción dos es un poco más de último recurso si encuentra inconsistencia.

Fuente

2012-07-05 14:37:17 Alastair

Hola gracias por tu cerveza. Intenté eso: en Android todavía no muestra la página completa y el zoom aún está habilitado. En el iPad también se aleja casi cabe en la pantalla, pero si cambio de horizontal a vertical o viceversa mantiene esa resolución ... Ningún buen cheque por sí mismo .. –

no tengo acceso a iToys en casa, pero ya que se Ya está usando jQuery, esto debería responder a su pregunta, aunque probablemente haya una manera más eficiente ... – Alastair

Desafortunadamente, 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 viewport no parece ser compatible en absoluto.

Android 2.3.x/3.x: Al establecer usuario escalable = sin deshabilita la escala de la ventana gráfica Meta Tag sí mismo, así. 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-escalable = sí, luego, para deshabilitar el zoom, puede establecer la escala mínima y máxima en el mismo valor para que no se reduzca ni 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 las escalas mínimo y máximo no se respetan más y si se utiliza usuario escalable = yes el usuario puede siempre hacer zoom, poniéndolo '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 puede deshabilitar el zoom y la escala al mismo tiempo en 4.x.

IOS/Safari (4.x/5.x probado): Escalas funciona como se espera, puede deshabilitar la escala con usuario escalable = 0 (palabras clave sí/no no funcionan en 4.x) iOS/Safari tampoco tiene el concepto de target-densitydpi, por lo que debe dejarlo para evitar errores. No necesita mín. Y máx. Ya que puede apagar el zoom de la manera esperada.Sólo utilizar el ancho o se encontrará con el iOS orientation bug

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

Chrome: Escalas funciona como se espera que lo hacen en iOS, mínimo y máximo son honrados y se puede apagar el zoom utilizando el usuario 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 utilizar algunos JS bastante simples para establecer el contenido en consecuencia después de algún detección básica 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.

[EDIT]

Android 4.x navegador Chrome (que creo que está preinstalado en la mayoría de los países): Puede asegurarse de que el usuario no puede hacer zoom y la página es de pantalla completa. Lo malo: debes asegurarte de que el contenido tenga un ancho fijo. No he probado esto en versiones inferiores de Android. Para ello ver 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 bandera para la etiqueta meta de visualización 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 fair share of bugs as well 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 ventana gráfica etiqueta meta minimal-ui mencionado en EDIT 2 ha sido eliminado por Apple en esta versión. Source - WebKit Notes

Fuente

2012-09-04 19:50:29 BrutalDev

Gracias por el útil artículo. Estaba luchando con Chrome en Android. Para el navegador de valores de Android 4.x, trabajamos alrededor del problema mencionado al establecer un ancho de ventana gráfica en píxeles. Supongamos que desea una escala fija de 1.3, la ventana gráfica debe ser Math.floor ((screen.availWidth * 10)/13). Colocamos ese número en una cookie, luego forzamos una recarga para permitir que el código del lado del servidor establezca la metaetiqueta correcta. –

, facilite este enfoque guión que has mencionado ... – vsync

Esta respuesta necesita más votos positivos –

Utilice simplemente:

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

funciona bien en mi Samsung Note II y HTC Desire.

Fuente

2013-05-23 13:40:36

Esto funciona para el navegador Chrome androide, en mi caso cromo no detectará la ventana gráfica sin añadir esta etiqueta meta – vangoz

Para 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 ejecutar la aplicación web en el modo de pantalla completa cuando se abre a través de un icono de acceso directo colocado en la pantalla de inicio del iPhone/iPod/iPad.

Las segundas etiquetas funcionan solo en conjunto 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 tercera 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 Fullscreen Web App for Android

Aquí algunos otros enlaces de interés:

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

Todo el meta conocida oficiales y no oficiales: https://gist.github.com/kevinSuttle/1997924

Fuente

2013-06-08 22:14:24

que estaba teniendo todo tipo de problemas con esto e incluso comenzó 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 />

Fuente

2013-06-28 06:26:19

Por lo que vale la pena, esto es lo que utiliza para obtener una página de 1024px contenido ancho para ir a pantalla exactamente completo en mi Nexus 7 (Android 4.2.2)/cromo, único paisaje 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 usuario-escalable = no en realidad niega el min- & max-scale). 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.

* i.e. 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.

Fuente

2013-07-23 17:39:13

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

Fuente

2014-05-22 01:54:49 Shakeel

Se utilizó la siguiente Javascript en la cabecera para establecer las etiquetas 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>

Se podría añadir condiciones adicionales y establecidos para sus necesidades específicas.

Fuente

2014-06-05 18:33:47

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!

Fuente

2014-06-11 08:03:09 user2390584

Android fija que 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" />

Fuente

2014-08-15 08:41:43 jargalan

Tengo un Samsung Galaxy Note 4 y utilizar Chrome como 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">

Fuente

2014-12-31 15:37:13 Giacomo

Uso este código para evitar el zoom en el iPhone y el problema se solucionó 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" />'); 
}

Fuente

2016-02-04 04:19:03

Página web completa y metadato de viewport de zoom deshabilitado para todos los navegadores móviles

Respuesta

Cuestiones relacionadas