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

Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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" />