CSS: Werden die Einheiten view height (vh) und view width (vw) weitgehend unterstützt?

Question

Ich verwende 100vh, um ein div vertikal mit Zeilenhöhe zu zentrieren. This site legt Unterstützung für vh und vw um 70%, ist das eine faire Einschätzung? Würden Sie beim Erstellen einer Site die Verwendung von Viewport-Einheiten empfehlen? Ich weiß, das ist ein bisschen subjektiv, ich bin nur auf der Suche nach Meinungen von erfahreneren Web-Entwickler als ich.

EDIT: Danke für die Eingabe jeder, ich will es auf Mobile gut aussehen, so denke ich, ich ' Ich muss auf vh verzichten.

Answer 1

Die Statistik ist klar und es ist eine faire Bewertung, aus meiner Sicht.

Ich denke, die Entscheidung muss von Ihnen getroffen werden. Wenn Sie Ihre Website mit der neuesten, besten Technologie zukunftssicher machen möchten, aber wissen, dass es derzeit einige Probleme gibt, dann sollten Sie es tun.

Wenn Sie nicht bereit sind, ein wenig mehr in Ihre Online-Präsenz zu investieren, dann bleiben Sie auf dem alten Weg, der in keiner Weise falsch ist.

BEARBEITEN: Wenn ich ein Responsive Design erstellen möchte, beginne ich mit der Entwicklung für Mobile Devices und erstelle dann die Desktop Version, um sicherzustellen, dass meine Ansichtsfenster korrekt funktionieren, da der Mobile Support an einigen Punkten fehlt (vmax besonders) . ABER darüber könntest du 50 Leute fragen und die Chancen, dass sie alle etwas anderes sagen, sind ziemlich gut.

Answer 2

Nun, Sie können sehen, es ist bereits für Desktop-Browser da, und der Support auf mobilen Geräten ist ziemlich begrenzt. Es hängt also davon ab, ob Sie eine Website erstellen möchten, die auf Computern gut aussieht, oder eine kompatible pixelbasierte Website, die auch auf Smartphones funktioniert.

Answer 3

Die Seite, die Sie mit answers your question wirklich verknüpft haben.

Es hängt davon ab, welche Browser Sie unterstützen müssen.

Die teilweise Unterstützung in IE9 bezieht sich auf die Unterstützung von "vm" anstelle von "vmin". Die teilweise Unterstützung in iOS7 ist auf fehlerhaftes Verhalten der vh-Einheit zurückzuführen. Alle andere Teilunterstützung bezieht sich darauf, die Einheit "vmax" nicht zu unterstützen.

Dies besagt, dass die Verwendung von Viewport-Einheiten in iOS7 "fehlerhaft" sein könnte. Ich würde nicht empfehlen, Bildfenstereinheiten zu verwenden, sondern stattdessen zu verwenden:

Pixels: z.B. height: 500px;

Prozentsatz: z.B. height: 50%;

Diese Werte werden weitgehend unterstützt und liefern die besten Ergebnisse.

Answer 4

Verwenden Sie sowohl CSS vh und jQuery, es ist sicherer.
jQuery Beispiel:

var clientHeight = $(window).height(); 
    $('.element').css('height', clientHeight); 

und CSS:

.element {height: 100vh;} 

Answer 5

Ansichtsfenster Einheiten sind groß, aber die meisten mobilen Browser-Anbieter verwaltet vh unbrauchbar in der Praxis zu machen.

Wenn Sie mit dem Scrollen beginnen oder die Scrollrichtung ändern, wird die Adressleiste entweder verschwinden oder wieder angezeigt. dann hörst du auf, gib deinen Finger frei und der vh Wert wird plötzlich neben jedem Element aktualisiert, das ihn benutzt, was zu einem UX Albtraum führt (der Benutzer erwartet keine Änderung der Größe am Ende des Scrollens, Ändern der Proportionen bestehender Elemente, Neulayout des Inhalts, etc).