android - que - viewport size
La configuración de la vista de Android “escalable por el usuario=no” rompe el nivel de ancho/zoom de la ventana gráfica (3)
Intentando renderizar la metaetiqueta de la ventana gráfica como tal:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Establecer la configuración de la escala establecerá las restricciones del usuario en cuanto a la distancia con la que pueden hacer zoom, por lo que si establece la cantidad inicial y máxima en la misma cantidad, esto debería solucionar el problema.
ACTUALIZACIÓN : Pude corregir mi error para dispositivos Android todos juntos configurando lo siguiente:
<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />
También noté que cierto contenido, como las etiquetas p, no fluía a través de la pantalla, por lo que el truco sería agregar la propiedad de imagen de fondo con una cadena vacía a cualquier contenido que esté atascado y que no pase por la vista de diseño. Espero que esto ayude esta vez para ti.
Estoy trabajando en una aplicación web que tiene un ancho de 640px.
En el head del documento me puse
<meta name="viewport" content = "width=640, user-scalable=no" />
por lo que el contenido se muestra bien y se estira horizontalmente.
Esto funciona perfectamente en iOS, pero en Android, el navegador abre el sitio web ampliado para que el usuario tenga que hacer doble clic para alejar la imagen y toda la página.
Cuando cambio la configuración de la ventana gráfica para omitir la etiqueta user-scalable por el user-scalable como esta:
<meta name="viewport" content="width=640" />
El navegador de Android se ajusta muy bien al 640px, por lo que funciona.
Sin embargo, el problema ahora es que los usuarios pueden acercarse y alejarse en Android e iOS ya que la etiqueta user-scalable el user-scalable no está establecida.
¿Cómo puedo prohibir la escala y al mismo tiempo configurar el ancho de la ventana gráfica a 640px en Android?
Quería que los dispositivos móviles siempre mostraran un sitio web de 640 px de ancho debido a un diseño que se rompería de otra manera. (un diseño que no hice ...) Por lo tanto, quería desactivar el zoom para usuarios móviles. Lo que me funcionó a mí es lo siguiente:
- ACTUALIZADO 2013-10-31
En primer lugar, no hay forma de hacerlo sin Javascript. Tendrá que comprobar la cadena de agente de usuario. Por lo tanto, creé un mobile-viewport.js e incluí el script justo antes de la etiqueta de cierre:
function writeViewPort() {
var ua = navigator.userAgent;
var viewportChanged = false;
var scale = 0;
if (ua.indexOf("Android") >= 0 && ua.indexOf("AppleWebKit") >= 0) {
var webkitVersion = parseFloat(ua.slice(ua.indexOf("AppleWebKit") + 12));
// targets android browser, not chrome browser (http://jimbergman.net/webkit-version-in-android-version/)
if (webkitVersion < 535) {
viewportChanged = true;
scale = getScaleWithScreenwidth();
document.write(''<meta name="viewport" content="width=640, initial-scale='' + scale + '', minimum-scale='' + scale + '', maximum-scale='' + scale + ''" />'');
}
}
if (ua.indexOf("Firefox") >= 0) {
viewportChanged = true;
scale = (getScaleWithScreenwidth() / 2);
document.write(''<meta name="viewport" content="width=640, user-scalable=false, initial-scale='' + scale + ''" />'');
}
if (!viewportChanged) {
document.write(''<meta name="viewport" content="width=640, user-scalable=false" />'');
}
if (ua.indexOf("IEMobile") >= 0) {
document.write(''<meta name="MobileOptimized" content="640" />'');
}
document.write(''<meta name="HandheldFriendly" content="true"/>'');
}
function getScaleWithScreenwidth() {
var viewportWidth = 640;
var screenWidth = window.innerWidth;
return (screenWidth / viewportWidth);
}
writeViewPort();
La secuencia de comandos comprueba si el visitante tiene un navegador de Android (no Chrome) o Firefox. El navegador de Android no admite la combinación de ancho = 640 y escalable por el usuario = falso, y el navegador Firefox tiene un ancho de pantalla doble por alguna extraña razón. Si el visitante tiene un teléfono con Windows, se establece el navegador MobileOptimized.
Tuve la misma situación, si quieres que el contenido siempre se ajuste al ancho de la pantalla sin permitir que el usuario se acerque o aleje, usa las siguientes etiquetas meta (esto funcionará sin importar el ancho que proporciones)
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />