Der trick, um viewport auf mobilen Einheiten

0
10

Viewport-Einheiten haben immer umstritten gewesen und einige, dass ist, weil, wie mobile Browser gemacht haben, die Dinge mehr kompliziert, indem Sie Ihre eigenen Meinungen darüber, wie, um Sie umzusetzen.

Case in point: sollte der Scrollbalken berücksichtigt werden, für das vw Gerät? Was ist eine Website-navigation oder die Seite Steuerelemente — sollte diese Anzahl in der Berechnung? Dann gibt es die bauphysikalischen Eigenschaften der Geräte selbst (Hallo, notch!) das kann nicht übersehen werden.

Erste, ein wenig Kontext

Die Skillung ist ziemlich vage darüber, wie der viewport-Einheiten berechnet werden soll. Mit mobilen Geräten, wir sind oft besorgt mit der vertikalen Höhe, also schauen wir uns speziell bei der viewport-Höhe (vh):

vh-Einheit
In Höhe von 1% der Höhe des anfänglichen umschließenden Blocks.

Also ja, keine klare Führung gibt, wenn es um die Handhabung von Gerät und browser-spezifischen Differenzierungen.

vh wurde zunächst berechnet, indem der aktuelle viewport des Browsers. Wenn Sie öffnete Ihren browser und begann zu laden, eine website, 1vh in Höhe von 1% des Bildschirms Höhe, abzüglich des browser-Schnittstelle.

Aber! Wenn Sie anfangen zu scrollen, das ist eine andere Geschichte. Sobald Sie Vergangenheit, die ein Stück von der browser-Schnittstelle, wie die Adresse, die bar, die vh-Wert würde zu aktualisieren, und das Ergebnis war eine schwierige Sprung in die Inhalte.

Safari für iOS wurde eine der ersten mobilen Browser zu aktualisieren, Ihre Umsetzung durch die Auswahl definieren Sie einen festen Wert für die vh auf der Basis der maximalen Höhe des Bildschirms. Damit der Benutzer nicht erleben würde, springt die Seite, sobald die Adresse der bar ging der Blick. Chrome mobile browser folgte vor rund einem Jahr.

Während dies geschrieben wird, gibt es ein ticket, um diese Adresse im Firefox Android.

Während mit einem festen Wert ist schön, es bedeutet auch, dass Sie nicht die volle Höhe element, wenn sich die Adressleiste ist in Sicht. Die Unterseite des Elements abgeschnitten.

Ein element wird abgeschnitten, an der Unterseite, wenn die Adressleiste ist in der Ansicht (Links), aber was wir wollen, ist die volle Ding (rechts).

CSS Benutzerdefinierter Eigenschaften: Der trick, um die richtige Dimensionierung

Die Idee fiel mir auf, dass Benutzerdefinierte CSS-Eigenschaften und ein paar JavaScript-Zeilen könnte der perfekte Weg, um die konsequente und richtige Dimensionierung, die ich brauchte.

In JavaScript, können Sie immer den Wert des aktuellen Arbeitsbereichs mithilfe der globalen Variablen-Fenster.innerHeight. Dieser Wert nimmt mit der browser-Schnittstelle berücksichtigt und aktualisiert wird, wenn sich die Sichtbarkeit ändert. Der trick ist, die zum speichern der viewport-Wert in einer CSS-Variablen und anwenden, um das element, anstatt die vh-Einheit.

Lassen Sie uns sagen, dass unsere CSS-benutzerdefinierte variable ist –vh für dieses Beispiel. Das bedeutet, dass wir wollen, dass es in unserem CSS so:

.meine-element {
height: 100vh; /* Fallback für Browser, die keine Unterstützung für Benutzerdefinierte Eigenschaften */
height: calc(var(–vh, 1vh) * 100);
}

OK, das unterscheidet uns. Jetzt Holen wir die innere Höhe des Viewports in JavaScript:

// Zuerst Holen wir uns die viewport-Höhe und wir mehrere it von 1% auf einen Wert für vh-Einheit
lassen vh = Fenster.innerHeight * 0.01;
// Dann setzen wir den Wert in der-vh benutzerdefinierten Eigenschaft der Wurzel des Dokuments
Dokument.documentElement.Stil.setProperty(‘–vh’, `${vh}px`);

Also, wir gesagt, JS zu packen, die Höhe des Viewports und dann gebohrt es runter auf 1/100stel, insgesamt haben wir also einen Wert zuweisen, wie unsere viewport-Höhe Einheit-Wert. Dann werden wir höflich gebeten, JS erstellen der CSS-variable (–vh) am :root.

Als Resultat können wir nun verwenden –vh als unsere Höhe, wie würden wir andere vh-Einheit, multiplizieren Sie mit 100 und wir haben die volle Höhe, die wir wollen.

Finden Sie die Stift-Viewport-Höhe über Mobile (keine Größe auf update) von CSS-Tricks (@css-tricks) auf CodePen.

Boah, die es gibt! Noch ein kleines detail.

Während unserer Arbeit Aussehen könnte, erfolgt an dieser Stelle, diejenigen von Ihnen mit einem scharfsinnigen Auge für das detail haben vielleicht mitbekommen, dass die JavaScript feuert, aber nie updates, die die Größe von unserem element, wenn der viewport-Höhe ändert. Gehen Sie voran und versuchen Sie, ändern der Größe der demo oben.

Wir aktualisieren den Wert von –vh, durch das hören auf das Fenster resize-Ereignis. Dies ist praktisch, wenn der Benutzer das Gerät dreht-Bildschirm, wie von quer-auf hochformat, oder die navigation verschiebt sich der Blick auf die Navigationstaste.

// Hören wir auf das resize-Ereignis
Fenster.addEventListener(‘resize’, () => {
// Führen wir den gleichen script wie vorher
lassen vh = Fenster.innerHeight * 0.01;
Dokument.documentElement.Stil.setProperty(‘–vh’, `${vh}px`);
});

⚠️ Aktualisierung des Werts –vh löst ein Neuzeichnen der Seite und dem Nutzer einen Sprung als Ergebnis. Aus diesem Grund, ich bin nicht in der Beratung, dass dieser trick sollte für jedes Projekt verwendet werden oder auf alle ersetzen, die Nutzung der vh-Einheit, aber nur wenn Sie Ihre Benutzer haben eine exakte Viewports Einheit Wert.

Finden Sie den Stift Richtig Viewport-Höhe auf Mobile von CSS-Tricks (@css-tricks) auf CodePen.

Sie können nun die Größe der demo vor und beachten Sie, dass der CSS-variable entsprechend aktualisiert.

Während ich vor kurzem verwendet diese Technik an einem Projekt und es hat wirklich geholfen, man sollte immer zweimal überlegen, wenn anstelle der browser-Standard-Verhalten. (Zum Beispiel, das kommt up eine Menge mit ::focus.) Auch manche Browser update sehr schnell in diesen Tagen, so beachten Sie, dass die Lösung von heute funktioniert möglicherweise nicht morgen.

In der Zwischenzeit, ich hoffe, dieser Artikel hilft! 👋