web-dev-qa-db-fra.com

Le paramètre de fenêtre Android "user-scalable = no" divise la largeur/le niveau de zoom de la fenêtre

Je travaille sur une application Web qui a une largeur de 640px.

Dans le document head j'ai mis 

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

le contenu est donc bien affiché et étiré horizontalement.
Cela fonctionne parfaitement sur iOS, mais sous Android, le navigateur ouvre le site Web en zoomant de sorte que l'utilisateur doit double-cliquer pour effectuer un zoom arrière et la page entière.

Lorsque je modifie le paramètre de la fenêtre d'affichage pour laisser de côté la balise user-scalable comme ceci:

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

le navigateur Android s’adapte bien à la résolution 640px - donc ça marche.
Cependant, le problème est que les utilisateurs peuvent zoomer et dézoomer sur Android et iOS car la balise user-scalable n’est pas définie.

Comment puis-je interdire la mise à l'échelle et définir en même temps la largeur de la fenêtre d'affichage sur 640px sur Android?

androidiphonemobilebrowserviewport
18
Horen

Essayer de rendre la balise méta viewport comme ceci:

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

La définition des paramètres d’échelle définira les restrictions imposées aux utilisateurs quant à la possibilité de zoomer. Par conséquent, si vous définissez la valeur initiale et maximale sur le même montant, le problème sera résolu.

UPDATE: J'ai pu corriger mon bogue pour les appareils Android en définissant les paramètres ci-dessous:

<meta name="viewport" content="width=640px, initial-scale=.5, maximum-scale=.5" />

J'ai également remarqué que certains contenus, tels que les balises p, ne circulaient pas à l'écran. Le hack consistait donc à ajouter la propriété background-image avec une chaîne vide à tout contenu bloqué qui ne passait pas dans la vue de présentation. J'espère que cela aide ce moment pour vous.

36
Ben Sewards

Je voulais que le mobile affiche toujours un site Web d'une largeur de 640 pixels à cause d'un design qui se casserait autrement. (un design que je n'ai pas fait ..). Par ce fait, je voulais désactiver le zoom pour les utilisateurs mobiles. Ce qui a fonctionné pour moi est le suivant:

- MIS À JOUR 2013-10-31

Tout d’abord, il n’est pas possible de le faire sans Javascript. Vous devrez vérifier la chaîne de l'agent utilisateur. Par conséquent, j'ai créé un mobile-viewport.js et inclus le script juste avant la balise de fermeture:

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

Le script vérifie si le visiteur dispose d'un navigateur Android (pas de chrome) ou firefox. Le navigateur Android ne prend pas en charge la combinaison width = 640 et user-scalable = false, et le navigateur firefox a une double largeur d'écran pour une raison étrange. Si le visiteur dispose d'un navigateur Windows Phone IE, MobileOptimized est défini.

7
pkmelee337

Dans la même situation, si vous souhaitez que le contenu s'adapte toujours à la largeur de l'écran sans permettre à l'utilisateur d'effectuer un zoom avant/arrière, utilisez les balises META suivantes (cela fonctionnera quelle que soit la largeur que vous donnez)

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