Wie, um die Seite auf den Bildschirm passt Breite auf einem mobilen Gerät?

Ich die eine Seite Formular. Ich brauche diese form skaliert und passen sich an die Bildschirmbreite auf jedes Gerät (Android, iOS, ...). Wie kann ich das mit HTML oder CSS? style="width:100%" ist keine Lösung in meinem Fall.

Dank!

  • Verwenden Sie den media-queries. Look up "responsive design".
InformationsquelleAutor Dmytro Zarezenko | 2013-09-30
  1. 4

    Warum ist width:100% keine option?

    Mithilfe von Medienabfragen können Sie zu Zielen auf unterschiedliche Bildschirmgrößen etwa so:

    form {
    width: 800px;
}

@media only screen and (max-width: 800px) {
    form {
        width: 100%;
    }
}

    Den obigen code machen würde form 800px Breite auf jedem Bildschirm, der breiter als 800px, und wenn es auf dem Bildschirm in der Größe gleich oder unter 800px Breite wird es 100% statt. Sie können so viele dieser wie Sie wollen, also zum Beispiel könnte man eine andere media query nach dieser für max-width: 500px und ändern Sie die form Stile, die entsprechend für Bildschirmgrößen 500 Pixel und unten.

    • Ich möchte die Skala auf alle Inhalte, nicht nur das Formular selbst. Ich möchte skalieren alle Elemente als gut. Wie wenn man mit zwei Fingern skalieren Geste auf dem touchscreen. Aber beim laden der Seite automatisch. Versuchen Sie, laden einige Seite auf mobilen erarbeiten und dann verkleinere es mit zwei Finger-Geste. Ich möchte die gleiche Sache auf pageload.
    • Die meisten mobilen Browser, also Safari wird automatisch vergrößert, passen die wrapper-Breite auch für nicht-responsive-Webseiten (so sehen Sie einen vergrößerten "desktop" - layout für die Website). Wenn es nicht ist, dies zu tun, werden Sie wahrscheinlich haben meta - tags in Ihrer head sind, dass Sie einige andere Verhalten. Kannst du die gesamte HTML-Ausgabe der Seite in das Formular auf?
    • Ich kann die URL für eine solche form 95.57.120.158:7300/api.php?action=poll&location_id=70
    • Versuchen Sie, diesen code aus der head Abschnitt: <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi, initial-scale=0, maximum-scale=1, user-scalable=yes" /> können Sie mit anderen Werten Experimentieren (siehe hier) als viewport meta-tag ist das, was steuert mobile viewport Verhalten und in Zahlungsverzug Gerät.
    InformationsquelleAutor Ennui
Schreibe einen Kommentar