Vollbild-Erfahrungen erstellen

Wir können ganz einfach immersive Vollbild-Websites und aber wie bei allem im Web gibt es dafür mehrere Möglichkeiten. Dies ist besonders wichtig, da immer mehr Browser eine "installierte Web-App“ die im Vollbildmodus starten.

App oder Website im Vollbildmodus ansehen

Es gibt mehrere Möglichkeiten, wie Nutzer oder Entwickler eine Web-App im Vollbildmodus anzeigen können.

  • Fordert den Browser auf, als Reaktion auf eine Nutzergeste in den Vollbildmodus zu wechseln.
  • Installieren Sie die App auf dem Startbildschirm.
  • Fake: Die Adressleiste wird automatisch ausgeblendet.

Browser als Reaktion auf eine Nutzergeste in den Vollbildmodus wechseln lassen

Nicht alle Plattformen sind gleich. In iOS Safari gibt es keine Vollbild-API, aber in Chrome unter Android. Firefox und IE 11 und höher. Die meisten Anwendungen, die Sie erstellen, nutzen eine Kombination aus JS API und die von der Vollbildspezifikation bereitgestellten CSS-Selektoren Die wichtigsten Zu den JS APIs, die beim Erstellen einer Vollbilderfahrung wichtig sind, gehören folgende:

  • element.requestFullscreen() (derzeit in Chrome, Firefox und IE vorangestellt) zeigt das Element im Vollbildmodus an.
  • document.exitFullscreen() (derzeit in Chrome, Firefox und IE vorangestellt. Firefox verwendet stattdessen cancelFullScreen()) bricht den Vollbildmodus ab.
  • document.fullscreenElement (derzeit in Chrome, Firefox und IE vorangestellt) Gibt "true" zurück, wenn eines der Elemente im Vollbildmodus ist.

Wenn Ihre App im Vollbildmodus angezeigt wird, sind die Steuerelemente der Benutzeroberfläche des Browsers nicht mehr verfügbar. die Ihnen zur Verfügung stehen. Dies ändert die Art und Weise, wie Nutzer mit Ihrem Nutzererfahrung. Sie verfügen nicht über die Standard-Navigationsbedienelemente wie „Vorwärts“ und umgekehrt; die Schaltfläche zum Aktualisieren ist die Notausstiegsschaltfläche. Es ist um diesem Szenario gerecht zu werden. Mit CSS-Selektoren können Sie Sie ändern den Stil und die Darstellung Ihrer Website, wenn der Browser Vollbildmodus.

<button id="goFS">Go fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      document.body.requestFullscreen();
    },
    false,
  );
</script>

Das obige Beispiel ist ein wenig konstruiert: Ich habe all die Komplexitäten verborgen, Anbieterpräfixe verwenden.

Der eigentliche Code ist viel komplexer. Mozilla hat ein sehr nützliches Skript erstellt, mit dem Sie in den Vollbildmodus wechseln können. Als wie Sie sehen können, ist die Anbieterpräfix-Situation komplex. im Vergleich zur angegebenen API umständlich. Selbst mit dem etwas vereinfachten Code ist sie immer noch komplex.

function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen =
    docEl.requestFullscreen ||
    docEl.mozRequestFullScreen ||
    docEl.webkitRequestFullScreen ||
    docEl.msRequestFullscreen;
  var cancelFullScreen =
    doc.exitFullscreen ||
    doc.mozCancelFullScreen ||
    doc.webkitExitFullscreen ||
    doc.msExitFullscreen;

  if (
    !doc.fullscreenElement &&
    !doc.mozFullScreenElement &&
    !doc.webkitFullscreenElement &&
    !doc.msFullscreenElement
  ) {
    requestFullScreen.call(docEl);
  } else {
    cancelFullScreen.call(doc);
  }
}

Wir Webentwickler hassen Komplexität. Eine ansprechende abstrakte API, die Sie verwenden können ist das Modul Screenfull.js von Sindre Sorhus Dabei werden die beiden leicht unterschiedlichen JS APIs und Anbieterpräfixe eine konsistente API zu nutzen.

Tipps zur Fullscreen API

Dokument im Vollbildmodus öffnen
<ph type="x-smartling-placeholder">
</ph> Vollbild im Body-Element
Abbildung 1: Vollbild des Body-Elements

Es ist ganz normal, das Body-Element im Vollbildmodus zu verwenden. mit einem WebKit- oder Blink-basierten Rendering-Modul, werden Sie feststellen, Verkleinern Sie die Textbreite auf die kleinstmögliche Größe, die alle Inhalte. Mozilla Gecko ist kein Problem.

<ph type="x-smartling-placeholder">
</ph> Vollbild für Dokumentelement
Abbildung 2: Vollbild des Dokumentelements

Um das Problem zu beheben, verwenden Sie das Element „document“ anstelle des Elements „body“:

document.documentElement.requestFullscreen();
Videoelement im Vollbildmodus erstellen

Ein Videoelement kann auf dieselbe Weise in den Vollbildmodus -Element im Vollbildmodus. Sie rufen die Methode requestFullscreen für das Video auf. -Elements.

<video id="videoElement"></video>
<button id="goFS">Go Fullscreen</button>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var videoElement = document.getElementById('videoElement');
      videoElement.requestFullscreen();
    },
    false,
  );
</script>

Wenn für Ihr <video>-Element das Attribut „controls“ nicht definiert ist, Der Nutzer hat keine Möglichkeit, das Video im Vollbildmodus zu steuern. Die empfehlen wir einen einfachen Container, der das Video umschließt und Steuerelemente, die der Nutzer sehen soll.

<div id="container">
  <video></video>
  <div>
    <button>Play</button>
    <button>Stop</button>
    <button id="goFS">Go fullscreen</button>
  </div>
</div>
<script>
  var goFS = document.getElementById('goFS');
  goFS.addEventListener(
    'click',
    function () {
      var container = document.getElementById('container');
      container.requestFullscreen();
    },
    false,
  );
</script>

Das bietet Ihnen viel mehr Flexibilität, da Sie die Container -Objekt mit dem CSS-Pseudo-Selektor zu erstellen (z. B. zum Ausblenden der Schaltfläche "goFS").

<style>
  #goFS:-webkit-full-screen #goFS {
    display: none;
  }
  #goFS:-moz-full-screen #goFS {
    display: none;
  }
  #goFS:-ms-fullscreen #goFS {
    display: none;
  }
  #goFS:fullscreen #goFS {
    display: none;
  }
</style>

Anhand dieser Muster erkennen Sie, wann der Vollbildmodus ausgeführt wird, Benutzeroberfläche geeignet, zum Beispiel:

  • Durch Bereitstellung eines Links zurück zur Startseite
  • Durch einen Mechanismus zum Schließen von Dialogfeldern oder zum Rückwärtsbewegungen

Eine Seite im Vollbildmodus vom Startbildschirm aus starten

Es ist nicht möglich, eine Vollbild-Web-Page zu starten, wenn die Nutzenden zu dieser navigieren. Browseranbieter sind sich bewusst, dass bei jedem Seitenaufbau ist ein großes Ärgernis, daher ist eine Nutzergeste erforderlich, um in den Vollbildmodus zu wechseln. Anbieter erlauben es Nutzern, Die Installation von Apps ist dem Betriebssystem signalisieren, dass die Nutzenden sie als App auf dem Plattform.

Auf den wichtigsten mobilen Plattformen ist die Implementierung mit einem der beiden Meta-Tags oder Manifestdateien wie im Folgenden beschrieben.

iOS

Seit der Einführung des iPhones konnten Nutzer Web-Apps auf und sie als Vollbild-Web-Apps starten.

<meta name="apple-mobile-web-app-capable" content="yes" />

Ist der Inhalt auf „Ja“ gesetzt, wird die Webanwendung im Vollbildmodus ausgeführt. sonst nicht. Standardmäßig wird Safari zum Anzeigen von Web-Properties verwendet. Inhalte. Sie können festlegen, ob eine Webseite im Vollbildmodus angezeigt werden soll. mit der schreibgeschützten booleschen JavaScript-Eigenschaft window.navigator.standalone.

<ph type="x-smartling-placeholder"></ph> Apple

Chrome für Android

Das Chrome-Team hat vor Kurzem eine Funktion implementiert, die den Browser anweist, die Seite im Vollbildmodus starten, wenn der Nutzer sie dem Startbildschirm hinzugefügt hat. Es ist ähnlich wie das Safari-Modell von iOS.

<meta name="mobile-web-app-capable" content="yes" />

Sie können Ihre Webanwendung so einrichten, dass ein Anwendungsverknüpfungssymbol zu einem Startbildschirm des Geräts zu öffnen und die App im Vollbild-App-Modus zu starten mit „Zum Startbildschirm hinzufügen“ von Chrome für Android Menüpunkt.

<ph type="x-smartling-placeholder"></ph> Google Chrome

Besser ist es, das Web App Manifest zu verwenden.

Web-App-Manifest (Chrome, Opera, Firefox, Samsung)

Manifest für Webanwendungen ist eine einfache JSON-Datei mit den Entwickler: Sie können festlegen, wie Ihre App den Nutzern in den Bereichen die sie erwarten würden, Apps (z. B. den Startbildschirm eines Mobilgeräts), direkte was Nutzende starten können, und, noch wichtiger, wie sie es starten können. Im Mit dem Manifest hast du in Zukunft noch mehr Kontrolle über deine App. konzentrieren wir uns nur darauf, wie Ihre App eingeführt werden kann. Im Detail:

  1. Den Browser über Ihr Manifest informieren
  2. Einführung beschreiben

Wenn Sie das Manifest erstellt und auf Ihrer Website gehostet haben, brauchen Sie nur noch muss auf allen Seiten, die Ihre App enthalten, ein Link-Tag hinzugefügt werden:

<link rel="manifest" href="/manifest.json" />

Chrome unterstützt Manifeste seit Version 38 für Android (Oktober 2014) Sie können festlegen, wie Ihre Web-App nach der Installation zum Startbildschirm (über die Eigenschaften short_name, name und icons) sollte gestartet werden, wenn der Nutzer auf das Startsymbol klickt (über start_url, display und orientation).

Unten sehen Sie ein Beispiel für ein Manifest. Es wird nicht alles gezeigt, was in einem Manifests.

{
  "short_name": "Kinlan's Amaze App",
  "name": "Kinlan's Amazing Application ++",
  "icons": [
    {
      "src": "launcher-icon-4x.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "landscape"
}

Diese Funktion ist ein progressiver Modus, mit dem du bessere, integrierte Funktionen für Nutzer eines Browsers, der diese Funktion unterstützt.

Wenn ein Nutzer Ihre Website oder App zum Startbildschirm hinzufügt, gibt es eine Absicht, wie eine App zu behandeln. Sie sollten die Nutzenden also die Funktionalität Ihrer App anstelle einer Produkt-Landingpage. Beispiel: wenn sich der Nutzer in Ihrer App anmelden muss, Markteinführung.

Dienstprogramm-Apps

Die meisten Dienstprogramm-Apps profitieren sofort davon. Für diejenigen, Apps, die sie genau wie jede andere App eigenständig einführen können. auf einer mobilen Plattform. Wenn du einer App die Einführung einer eigenständigen App anweisen möchtest, füge dies im Web hinzu App-Manifest:

    "display": "standalone"
Spiele

Die meisten Spiele profitieren sofort von einem Manifest. Das riesige die meisten Spiele im Vollbildmodus starten wollen und eine bestimmte Ausrichtung.

Wenn ihr einen vertikalen Scroller oder ein Spiel wie Flappy Birds entwickelt, möchten, dass das Spiel immer im Hochformat gezeigt wird.

    "display": "fullscreen",
    "orientation": "portrait"

Wenn ihr hingegen ein Puzzle oder ein Spiel wie X-Com entwirft, dass das Spiel immer das Querformat verwendet.

    "display": "fullscreen",
    "orientation": "landscape"
Nachrichtenwebsites

Nachrichtenwebsites sind meist rein inhaltsbasierte Inhalte. Die meisten Entwickler ist es natürlich nicht ratsam, ein Manifest zu einer Nachrichtenwebsite hinzuzufügen. Das Manifest legen Sie fest, was Sie veröffentlichen möchten (die Titelseite Ihrer Nachrichtenwebsite) und wie die Anzeige geöffnet wird (Vollbild oder normaler Browsertab).

Die Entscheidung liegt bei Ihnen und es liegt bei Ihnen, wie die Nutzer Ihrer Meinung nach auf Ihre Nutzererfahrung. Wenn Ihre Website den gesamten Chrome-Browser haben soll, von einer Website erwarten, können Sie die Anzeige auf browser einstellen.

    "display": "browser"

Wenn Ihre Nachrichtenwebsite den Eindruck vermittelt, dass die meisten Nachrichten-Apps und alle webähnlichen Chrome von der Benutzeroberfläche entfernen. setzen Sie dazu „Anzeige“ auf standalone.

    "display": "standalone"

Fake: Adressleiste automatisch ausblenden

Du kannst „Vollbild imitieren“ indem Sie die Adressleiste wie folgt automatisch ausblenden:

window.scrollTo(0, 1);

Dies ist eine ziemlich einfache Methode. Die Seite wird geladen und die Browserleiste wird aufgefordert, aus dem Weg räumen. Leider ist sie nicht standardisiert unterstützt. Außerdem musst du ein paar Macken umgehen.

Browser stellen z. B. häufig die Position auf der Seite wieder her, wenn der Nutzer navigiert zurück dorthin. Mit window.scrollTo wird dies überschrieben, was ärgerlich Nutzenden. Um dieses Problem zu umgehen, müssen Sie die letzte Position in LocalStorage und um Grenzfälle zu kümmern, z. B. wenn die Nutzenden Seite in mehreren Fenstern geöffnet ist).

UX-Richtlinien

Wenn Sie eine Website im Vollbildmodus erstellen, der potenziellen Änderungen an der Nutzererfahrung, die Sie kennen müssen, um in der Lage sein, einen Service zu entwickeln, den Ihre Nutzer lieben werden.

Verlasse dich nicht auf die Navigationssteuerung

iOS hat keine Hardware-Schaltfläche „Zurück“ und keine Touch-Geste zum Aktualisieren. Daher müssen Sie dass Nutzende durch die App navigieren können, ohne sich an sie binden zu müssen.

Sie können feststellen, ob Sie den Vollbildmodus oder den installierten Modus verwenden. auf allen gängigen Plattformen.

iOS

Unter iOS können Sie mit dem booleschen Wert navigator.standalone feststellen, ob der Nutzer über den Startbildschirm gestartet werden.

if (navigator.standalone == true) {
  // My app is installed and therefore fullscreen
}

Web-App-Manifest (Chrome, Opera, Samsung)

Beim Starten als installierte App wird Chrome nicht im Vollbildmodus ausgeführt. damit document.fullscreenElement null zurückgibt und die CSS-Selektoren funktionieren nicht.

Fordert der Nutzer den Vollbildmodus über eine Touch-Geste auf Ihrer Website an, wird standardmäßig Es sind Vollbild-APIs verfügbar, einschließlich des CSS-Pseudoselektors, mit dem Sie Passen Sie Ihre Benutzeroberfläche wie folgt an, um auf den Vollbildmodus zu reagieren:

selector:-webkit-full-screen {
  display: block; // displays the element only when in fullscreen
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Wenn die Nutzer deine Website über den Startbildschirm aufrufen, wird das Medium „display-mode“ angezeigt wird auf die Definition im Web-App-Manifest festgelegt. Im Fall von in einem reinen Vollbildmodus angezeigt wird, sieht es so aus:

@media (display-mode: fullscreen) {
}

Wenn der Nutzer die Anwendung im eigenständigen Modus startet, gibt der display-mode Medienabfrage ist standalone:

@media (display-mode: standalone) {
}

Firefox

Wenn der Nutzer über Ihre Website den Vollbildmodus anfordert oder die App in Vollbildmodus sind alle Standard-Vollbild-APIs verfügbar, einschließlich der CSS-Pseudoselektor, mit dem Sie Ihre UI anpassen können, um auf den Vollbildmodus zu reagieren etwa so:

selector:-moz-full-screen {
  display: block; // hides the element when not in fullscreen mode
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Internet Explorer

In IE fehlt bei der CSS-Pseudoklasse ein Bindestrich, ansonsten funktioniert sie ähnlich wie Chrome und Firefox.

selector:-ms-fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Spezifikation

Die Schreibweise in der Spezifikation entspricht der von IE verwendeten Syntax.

selector:fullscreen {
  display: block;
}

selector {
  display: none; // hides the element when not in fullscreen mode
}

Vollbildansicht für Nutzer aktivieren

Die Vollbild-API kann manchmal etwas knifflig sein. Browseranbieter möchten nicht, die Nutzer auf eine Vollbildseite zu sperren. Sie haben Mechanismen entwickelt, um so schnell wie möglich aus dem Vollbildmodus. Das bedeutet, dass Sie keine Vollbild-Website, die sich über mehrere Seiten erstreckt, aus folgenden Gründen:

  • Wenn Sie die URL programmatisch mit window.location = "http://example.com" ändern, wird die Anzeige nicht mehr im Vollbildmodus angezeigt.
  • Klickt ein Nutzer auf einen externen Link auf Ihrer Seite, wird der Vollbildmodus beendet.
  • Das Ändern der URL über die navigator.pushState API wird auch außerhalb des Vollbildmodus.

Sie haben zwei Möglichkeiten, die Vollbildansicht für den Nutzer zu aktivieren:

  1. Verwenden Sie die Mechanismen der installierbaren Webanwendung, um in den Vollbildmodus zu wechseln.
  2. Verwalten Sie Ihre UI und den App-Status mithilfe des Fragments #.

Durch Verwenden der #syntax zum Aktualisieren der URL (window.location = "#somestate") und Wenn Sie auf das Ereignis window.onhashchange warten, können Sie das Browser-eigene Ereignis Verlaufsstapel zum Verwalten von Änderungen am Anwendungsstatus, dem Nutzer ermöglichen, oder eine einfache programmatische Schaltfläche "Zurück" anbieten, mit der History API:

window.history.go(-1);

Nutzer kann auswählen, wann der Vollbildmodus aktiviert werden soll

Nichts ärgert Nutzer mehr als eine Website, die etwas tut. unvorhergesehen. Wenn ein Nutzer Ihre Website besucht, versuchen Sie nicht, ihn zu Vollbild.

Fange nicht das erste Touch-Ereignis ab und rufe requestFullscreen() auf.

  1. Es ist ärgerlich.
  2. Der Browser kann den Nutzer zu einem späteren Zeitpunkt darüber informieren, sodass die App den ganzen Bildschirm einnimmt.

Wenn Sie Apps im Vollbildmodus starten möchten, denken Sie über die Installation nach für jede Plattform erstellen.

Nutzer nicht dazu auffordern, Ihre App auf einem Startbildschirm zu installieren

Wenn Sie vorhaben, über die installierten App-Mechanismen ein Vollbilderlebnis anzubieten den Nutzenden rücksichtsvoll zu sein.

  • Seien Sie diskret. Weisen Sie sie in einem Banner oder in einer Fußzeile darauf hin, dass sie die App installieren können.
  • Wenn er die Aufforderung ablehnt, sollte sie nicht mehr angezeigt werden.
  • Beim ersten Besuch der Nutzer ist es unwahrscheinlich, dass sie die App installieren möchten, es sei denn, sie möchten die App installieren. dass sie mit Ihrem Service zufrieden sind. Fordere sie gegebenenfalls auf, die Installation zu starten, zu einer positiven Interaktion auf Ihrer Website führen.
  • Wenn ein Nutzer Ihre Website regelmäßig besucht und die App nicht installiert, Ihre App in Zukunft wahrscheinlich nicht mehr installiert. Spamt sie nicht weiter.

Fazit

Auch wenn wir kein vollständig standardisiertes und implementiertes API haben, Anleitungen in diesem Artikel, mit denen Sie ganz einfach User Experiences erstellen können, den gesamten Bildschirm der Nutzenden nutzen, unabhängig von der Kundschaft.

Feedback