web-dev-qa-db-de.com

Wie berechnet man die Höhe des sichtbaren Bereichs (d. H. Fensterhöhe abzüglich Adress- und Lesezeichenleisten) in der mobilen Safari für Web-App?

Wie lässt sich richtig berechnen, wie viel sichtbarer Speicherplatz auf Mobile Safari verfügbar ist? Mit Anzeigebereich ist die Größe des Bildschirms gemeint, die einer Web-App tatsächlich zur Verfügung steht, dh die Fensterhöhe abzüglich der Adress- und Lesezeichenleisten.

iOS 7 verhindert das Ausblenden der Adressleiste, und wir müssen die Höhe des Ansichtsfensters ordnungsgemäß berücksichtigen.

14
Crashalot

window.innerWidth und window.innerHeight geben die Breite und Höhe des Ansichtsfensters an.

15
neilco

Ich weiß, das ist 5 Jahre alt, aber dieses Problem bleibt bestehen, wie ich sagen kann. Meine Problemumgehung: Verwenden Sie ein HTML-Element auf der Seite, das mit CSS: .el{ height:100vh; } formatiert ist, und rufen Sie die Höhe in Pixel für Javascript mit jQuery ab: $('.el').height();

Wenn Sie für ein solches Element keine praktische Verwendung haben, können Sie im Handumdrehen eines erstellen, um den Viewport zu malen:

var vh = $('<div style="height:100vh"></div>"').appendTo('body').height();
$('body div:last-child').remove();
0
23b

Setzen Sie das CSS height Ihres Root-Container-Elements (nennen wir es rootElement) auf die Höhe des View-Ports:

.root-element {
  height: 100vh;
}

Wenn die Seite gerendert wurde, führen Sie diesen Code aus, um die Höhe von rootElement auf die Höhe des Ansichtsfensters abzüglich der Größe der Browser-Benutzeroberflächenleisten zu aktualisieren (z. B. unter iOS Safari: obere Adressleiste, untere Navigationsleiste…). :

const rootElement = document.querySelector(".root-element")
const viewPortH = rootElement.getBoundingClientRect().height;
const windowH = window.innerHeight;
const browserUiBarsH = viewPortH - windowH;
rootElement.style.height = `calc(100vh - ${browserUiBarsH}px)`;

Diese Lösung stellt die Größe Ihres Stammcontainers auf die verfügbaren Werte ein, bietet dem Browser jedoch auch die Möglichkeit, die Höhe von rootElement anzupassen, wenn die Größe des Fensters geändert wird (z. B. auf einem Desktop).

0
MonsieurDart