2017-07-05 4 views
0

Ich weiß, wir können horizontal reagieren Inhalt in ionic 2. Was ich wissen möchte ist, wie Seiten Höhe reagieren für alle Arten von Bildschirmen zum Beispiel wenn ein Bildschirm den gesamten Bereich auf dem iPhone 5 abdecken dann sollte es ganze Höhe wisie Bereich abdecken im iphone 7 auch? Was ist der beste Ansatz, um dies zu erreichen?Wie man höhenempfindliche Bildschirme in ionischen 2 macht?

Antwort

0

Ich hoffe, ich habe Ihre Frage richtig verstanden, möchten Sie die Seitenhöhe die gleiche Höhe wie das Gerät anzeigen lassen?

Nun, lassen Sie mich Ihnen ....

Darstellungshöhe (oder vh)

Ein vh bis 1% der Höhe des Ansichtsfensters gleich ist. Wie Sie sich wahrscheinlich vorstellen können, wäre 100vh gleich 100% der Höhe des Viewports! Das Ansichtsfenster ist im Grunde die Ansicht der Seite. Allerdings Vorsicht, die VH-Einheit wird nicht in Internet Explorer 8 oder früher unterstützt.

+0

wird dies in ionischen 2 unterstützt? –

+0

@WaleedShabbir Viewporthöhe ist nativ für CSS/HTML, es funktioniert mit oder ohne ionic 2. – Amorris

0

Ich hoffe, Sie bekommen eine gute Idee, um die Responsive richtig aus den folgenden Parametern zu machen.

vw: 1/100stel Darstellungsbreite

vh: 1/100stel Darstellungsfeld Höhe

vmin: 1/100stel der kleinsten Seite

vmax: 1/100. der größten Seite

Eigentlich vh ist ein perfektes s um das Responsive basierend auf Viewporot zu machen. Das Ansichtsfenster ist der Bereich, in dem der Browser die Site rendert. Dies ist Ihr Bildschirm abzüglich des reservierten Speicherplatzes des Browsers Chrome. Manchmal möchten Sie ein Element basierend auf diesem Ansichtsfenster wie eine Seitenleiste anpassen. Dies kann mit einer Einheit geschehen, mit der wir alle vertraut sind: Prozentsätze.

+0

Warum hast du ihm einfach meine Antwort gegeben? etw. – Amorris

1

Wie einige bereits erwähnt haben, können Sie vh für die Höhe Eigenschaft auf Ihrem CSS verwenden. Der Haken dabei ist, dass sich die auch bei gleicher Bildschirmausrichtung ändern kann. Dies passiert, wenn Sie eine input in Ihrer App platzieren und den Fokus erhält. Die Tastatur des mobilen Geräts wird auf dem Bildschirm angezeigt, und die Höhe des Ansichtsfensters ändert sich, weil die Tastatur daran teilnimmt. f Ihr Handy-Display ist 430x710 (einige Zufallszahl hier) 1VH7.1px sein würde, aber wenn Sie an einem Eingang tippen und können sagen, dass die Tastatur 430x300 ist, jetzt 1VH wird 4.1px ((- )/100)

Das ist ein echtes Problem mit Responsive Design sein könnte. Mein Rat ist, vw zu verwenden, die einzige Sache, die es ändern könnte, ist die Bildschirmausrichtung (Sie können es sperren). Der zusätzliche Schritt ist, dass Sie die Umwandlung verwenden müssen, um die richtige Nummer in vw zu erhalten, die Sie zuvor in vh wollten.

Verwandte Themen