it-swarm.com.de

Android Viewport-Einstellung "user-scalable = no" unterbricht Breite/Zoom-Ebene des Viewports

Ich arbeite an einer Web-App mit einer Breite von 640 Pixeln.

Im Dokument head habe ich eingestellt 

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

so wird der Inhalt schön dargestellt und horizontal gestreckt.
Dies funktioniert einwandfrei unter iOS. In Android öffnet der Browser jedoch die vergrößerte Website, sodass der Benutzer zum Verkleinern die gesamte Seite doppelt anklicken muss.

Wenn ich die Viewport-Einstellung so ändere, dass das user-scalable-Tag wie folgt ausgelassen wird:

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

der Android-Browser passt sich gut an die 640px an - so funktioniert es.
Das Problem ist jedoch jetzt, dass Benutzer unter Android und iOS vergrößern und verkleinern können, da der Tag user-scalable nicht festgelegt ist.

Wie kann ich die Skalierung verbieten und gleichzeitig die Breite des Ansichtsfensters unter Android auf 640px einstellen?

18
Horen

Versuch, das Viewport-Meta-Tag so zu rendern:

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

Durch das Einstellen der Skaleneinstellungen werden die Benutzereinschränkungen für das Zoomen festgelegt. Wenn Sie also den Anfangs- und den Maximalwert auf den gleichen Wert setzen, sollte dies das Problem beheben.

UPDATE: Ich konnte meinen Fehler für Android-Geräte zusammen beheben, indem ich Folgendes einstelle:

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

Ich habe auch bemerkt, dass einige Inhalte, wie z. B. p-Tags, nicht über den Bildschirm fließen. Daher besteht der Hacker darin, die Hintergrund-Image-Eigenschaft mit leerem String zu jedem Inhalt hinzuzufügen, der festgeklemmt ist und nicht in der Layoutansicht angezeigt wird. Hoffe, das hilft dir diesmal.

36
Ben Sewards

Ich wollte, dass eine Website immer 640px breit ist, weil das Design sonst kaputt gehen würde. (ein Design, das ich nicht gemacht habe ..) Dabei wollte ich das Zoomen für mobile Benutzer deaktivieren. Was für mich funktioniert hat, ist folgendes:

- AKTUALISIERT 2013-10-31

Erstens gibt es keine Möglichkeit, dies ohne Javascript zu erreichen. Sie müssen die Zeichenfolge des Benutzeragenten überprüfen. Deshalb habe ich eine mobile-viewport.js erstellt und das Skript kurz vor dem schließenden Tag eingefügt:

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

Das Skript prüft, ob der Besucher einen Android- (nicht Chrome) oder Firefox-Browser hat. Der Android-Browser unterstützt nicht die Kombination aus width = 640 und user-scalable = false, und der Firefox-Browser hat aus merkwürdigen Gründen eine doppelte Bildschirmbreite. Wenn der Besucher einen Windows Phone IE - Browser hat, ist MobileOptimized eingestellt.

7
pkmelee337

Ich hatte die gleiche Situation, wenn Sie möchten, dass der Inhalt immer an die Bildschirmbreite angepasst wird, ohne dass der Benutzer die Ansicht vergrößern oder verkleinern kann, verwenden Sie die folgenden Metatags (dies funktioniert unabhängig von der Breite, die Sie angeben)

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