Wie, um sicherzustellen, dass eine website füllt den gesamten viewport? (desktop, mobile, ipad, etc.)
Wir haben derzeit eine website, die nicht von Flüssigkeit/flexibel (wie es ändert sich nicht das layout abhängig von der viewport-Größe).
Wenn es auf dem desktop angezeigt, füllt es den gesamten Bildschirm (und zentriert ausgerichtet). Aber Problem entsteht, wenn wir es auf andere Bildschirm-Auflösungen wie auf dem iPhone oder iPad. Das website-layout richtig aussieht, nur, dass es nicht den gesamten Bildschirm ausfüllen oder irgendwie beschnitten wird, auf der Seite.
Versuchte ich mit <meta name="viewport" content="width=[value]">
, aber es funktioniert nur auf einem Gerät zur Zeit (iPhone oder iPad, aber nicht beide gleichzeitig).
Gibt es einen code für die Skalierung der website zu passen, in welcher viewport verwendet wird?
- Wie viel Forschung haben Sie getan, auf Responsive Webdesign? Hier sind einige Rahmen, wenn Sie sind auf der Suche in einem: 22 Responsive Framework
- Die Sache ist die, unsere Webseite ist nicht responsive-design bereit. Dies ist nur zu verbessern, sein Aussehen auf andere Geräte, obwohl Sie nicht reagiert.
- Haben Sie versucht, mit <meta name="viewport" content="width=device-width"> die passen sich automatisch der Breite des Geräte-Breite?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Wann kommt responsive design es gibt viele kreative Wege, dem Problem bei der hand.
Könnten Sie versuchen, mit Prozentzahlen, um Ihr Design mehr reagiert. Mit Prozentzahlen ist eine sichere Wette für die Maximierung der auf der Benutzer-Ansicht.
zB.
Von dort können Sie spielen mit Ihrem Standort Container und mehr bestimmte.
Auch einige JavaScript im head-Abschnitt der HTML-Hilfe können Sie erkennen, Bildschirmgrößen und stellen unterschiedliche CSS-Regeln entsprechend:
Dem JavaScript oben ist die überprüfung, wenn der Benutzer den Bildschirm ist kleiner oder gleich 600px; wenn ja, passt die Breite, Höhe, margin-Regeln für das body-element.
Hoffe, das hilft!
Die sniffer-Funktion in Verbindung mit diesem meta-tag funktioniert gut:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Haben Sie versucht, die Einstellung für die initial-scale auf 1