wake-up-neo.net

Erreichen der minimalen Breite mit dem Viewport-Meta-Tag

Ich möchte, dass die Breite meiner Webseite Ansichtsfenster gleich Gerätebreite ist, solange Gerätebreite> 450px oder ansonsten 450px (mein Layout wird dynamisch skaliert) , sieht aber unter 450px Breite nicht gut aus).

Die folgenden zwei Meta-Tags eignen sich gut für Tablets mit einer Gerätebreite> 450px:

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

bei Telefonen (bei denen beispielsweise die Gerätebreite 320px beträgt) ist die erstere jedoch zu dünn für den Inhalt. Letzteres bewirkt, dass der Browser vergrößert und der Benutzer manuell verkleinert, um den Inhalt anzuzeigen.

Alternativ funktioniert dieses Meta-Tag auch auf Handys

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

nutzt aber nicht die zusätzliche Breite, die für Tablets verfügbar ist.

Jede Hilfe/Idee wäre sehr dankbar (und wenn es einen Unterschied macht, verwende ich GWT).

58
Tom G

Sie möchten also die Breite des Tags viewport dynamisch ändern.

Bitte schön :

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script> 

Siehe: http: //www.quirks mode.org/mobile/tableViewport.html

37
Suresh Atta

Versuche dies:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    }
}
</script>

Beachte, dass ich die "initial-scale = 1" getauscht habe, da ich denke, dass du es falsch herum gemacht hast. Sie möchten, dass initial_scale auf 1 gesetzt wird, wenn width = device-width, damit die Seite genau in das Fenster passt. Wenn Sie eine bestimmte Ansichtsfensterbreite festlegen, möchten Sie die anfängliche Skalierung nicht auf 1 setzen (andernfalls wird die Seite zunächst vergrößert).

16
CpnCrunch

verwenden Sie ein @media-Tag und CSS. Es wirkt Wunder. Obwohl das Ansichtsfenster keine minimale Breite aufweist, ist dies der bevorzugte Weg.

Folgendes mache ich für das Ansichtsfenster:

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

Dann passe ich die Größe für das Panel an, das an den viewPort angehängt ist:

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

Natürlich können Sie auch Zwischengrößen haben ...

hier ist mehr in einem anderen Beispiel

5
user1258245

Der in den anderen Antworten angegebene JavaScript-Code funktioniert in Firefox nicht, funktioniert jedoch, wenn Sie das Meta-Tag entfernen und ein neues einfügen.

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

Oder einfach immer in JavaScript einfügen:

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

Aus Gründen der Übersichtlichkeit habe ich eine Polyfüllung geschrieben, um dem Metatag des Ansichtsfensters einfach ein min-width - Attribut hinzuzufügen:

Minimale Breite im Metatag des Ansichtsfensters festlegen

Damit können Sie einfach Folgendes tun:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
3
Brendan Long

Kurz gesagt, es ist nicht erforderlich, die minimale Breite für das Ansichtsfenster festzulegen, da Sie sie stattdessen für das Element body oder html festlegen können, um sie und ihren Inhalt breiter als das Ansichtsfenster zu machen. Der Benutzer kann Inhalte scrollen oder verkleinern.

body {
  min-width: 450px;
}

Ich habe einige Tests in Chrome für Android) durchgeführt und es skaliert die Schriftarten einiger Elemente nach oben, wenn die Breite des Ansichtsfensters auf etwas anderes als device-width Eingestellt ist. Auch shrink-to-fit=yes Ist nützlich, wenn eine Seite zunächst herausgezoomt werden soll.

Letztendlich unterstützt dieser Ansatz Desktop-Browser, die seltsame Fenstergrößen oder aktuelle Zoomeinstellungen aufweisen können (die sich beide auf die gemeldeten Ansichtsfensterabmessungen auswirken), das Ansichtsfenster-Metatag jedoch nicht berücksichtigen.

1