Korzystanie z trybu pełnoekranowego

Możemy z łatwością tworzyć wciągające witryny pełnoekranowe, aplikacji, ale tak jak w każdej witrynie internetowej, jest na to kilka sposobów. Jest to szczególnie istotne teraz, gdy więcej przeglądarek obsługuje „zainstalowaną wersję” aplikacja internetowa które uruchamiają pełny ekran.

Włączanie pełnego ekranu aplikacji lub witryny

Użytkownik lub deweloper może włączyć pełny ekran aplikacji internetowej na kilka sposobów.

  • Poproś przeglądarkę o przejście na pełny ekran w odpowiedzi na gest użytkownika.
  • Zainstaluj aplikację na ekranie głównym.
  • Zafałszuj: automatycznie ukrywaj pasek adresu.

Żądanie przejścia przeglądarki do trybu pełnoekranowego w odpowiedzi na gest użytkownika

Nie wszystkie platformy są sobie równe. Safari w iOS nie ma pełnoekranowego interfejsu API, ale działa w Chrome na Androida, Firefox, IE w wersji 11 i nowszych, Większość tworzonych aplikacji będzie wykorzystywać JS API i selektory arkusza CSS ze specyfikacji pełnoekranowej. Główny Interfejsy JS API, o których musisz pamiętać, tworząc pełnoekranowe środowisko:

  • element.requestFullscreen() (obecnie przedrostek w Chrome, Firefoksie i IE) wyświetla element w trybie pełnoekranowym.
  • document.exitFullscreen() (obecnie ma prefiks w Chrome, Firefoksie i IE. Firefox używa interfejsu cancelFullScreen()) anuluje tryb pełnoekranowy.
  • document.fullscreenElement (obecnie przedrostek w Chrome, Firefoksie i IE) zwraca wartość „prawda”, jeśli którykolwiek z elementów jest w trybie pełnoekranowym.
.

Gdy aplikacja działa w trybie pełnoekranowym, nie masz już opcji interfejsu przeglądarki dostępnych narzędzi. Zmienia to sposób, w jaki użytkownicy wchodzą w interakcje z Twoimi i uzyskiwanie dodatkowych informacji. Nie mają standardowych elementów sterujących nawigacją, takich jak Dalej. i Wstecz; nie mają więc dostępu awaryjnego – przycisku Odśwież. Jest które są istotne w tym scenariuszu. Możesz użyć niektórych selektorów arkusza CSS, zmieniasz styl i wygląd witryny po otwarciu trybu pełnoekranowego.

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

Powyższy przykład jest nieco mylący: Ukryłam całą złożoność wokół na podstawie prefiksów dostawców.

Rzeczywisty kod jest o wiele bardziej złożony. Mozilla stworzył bardzo przydatny skrypt, który służy do włączania trybu pełnoekranowego. Jako jak widać, sytuacja z prefiksem dostawcy jest złożona i uciążliwe w porównaniu z podanym interfejsem API. Nawet z niewielkim uproszczonym kodem poniżej, nadal jest to złożone.

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);
  }
}

Programiści stron internetowych nienawidzą złożoności. Przyjemny abstrakcyjny interfejs API, którego możesz użyć to moduł Screenfull.js Sindre Sorhus łączący 2 nieco różne prefiksy interfejsów API JS i dostawców w jeden. spójny interfejs API.

Wskazówki dotyczące pełnoekranowego interfejsu API

Włączanie pełnego ekranu dokumentu
Pełny ekran w elemencie body
Rys. 1. Pełny ekran w elemencie body.

To naturalne, że umieszczasz na pełnym ekranie element body, ale jeśli w silniku renderowania WebKit lub Blink, zauważysz, że efekt jest dziwny, Zmniejszając szerokość do najmniejszego rozmiaru, który zawierałby treści. (można z niego korzystać).

Pełny ekran w elemencie dokumentu
Rys. 2. Pełny ekran elementu dokumentu

Aby rozwiązać ten problem, użyj elementu dokumentu zamiast elementu Body:

document.documentElement.requestFullscreen();
Włączanie pełnego ekranu elementu wideo

Umieszczenie elementu wideo w trybie pełnoekranowym wygląda tak samo jak w przypadku dowolnego innego element na pełnym ekranie. Wywołujesz metodę requestFullscreen w filmie .

<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>

Jeśli element <video> nie ma zdefiniowanego atrybutu Controls, po tym, jak wyświetla się na pełnym ekranie, użytkownik nie może sterować filmem. zalecany jest podstawowy kontener opakowujący film które elementy sterujące mają być widoczne dla użytkownika.

<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>

Zapewnia to dużo większą elastyczność, ponieważ można łączyć kontenery. za pomocą pseudoselektora CSS (np. aby ukryć przycisk „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>

Korzystając z tych wzorców, możesz wykryć, kiedy włączony jest pełny ekran, i dostosować interfejsu użytkownika, na przykład:

  • Poprzez podanie linku z powrotem do strony startowej
  • Poprzez udostępnienie mechanizmu zamykania okien dialogowych lub przechodzenia wstecz

Uruchamianie strony w trybie pełnoekranowym na ekranie głównym

Nie można uruchomić pełnoekranowej strony internetowej po przejściu do niej przez użytkownika. Dostawcy przeglądarek są świadomi, że wyświetlanie na pełnym ekranie przy każdym wczytaniu strony jest bardzo uciążliwe, dlatego włączenie pełnego ekranu wymaga gestu użytkownika. Dostawcy pozwalają użytkownikom na „instalowanie” aplikacji, a instalacja i poinformować system operacyjny, że chce uruchomić aplikację platformy.

Implementacja na głównych platformach mobilnych jest prosta za pomocą metatagów lub plików manifestu w następujący sposób.

iOS

Od wprowadzenia na rynek telefonu iPhone użytkownicy mogą instalować aplikacje internetowe ekranu głównego i uruchamiać je jako pełnoekranowe aplikacje internetowe.

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

Jeśli zasada ma wartość Tak, aplikacja internetowa działa w trybie pełnoekranowym. w przeciwnym razie nie jest. Domyślnym działaniem jest używanie Safari do wyświetlania stron internetowych. treści. Możesz określić, czy strona internetowa ma być wyświetlana w trybie pełnoekranowym. używając właściwości logicznej JavaScript window.navigator.standalone tylko do odczytu.

Apple

Chrome na Androida

Zespół Chrome wdrożył ostatnio funkcję, która informuje przeglądarkę, uruchamiają stronę na pełnym ekranie po dodaniu jej do ekranu głównego przez użytkownika. Jest podobnie jak w przypadku modelu Safari na iOS.

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

Do swojej aplikacji internetowej możesz dodać ikonę skrótu do aplikacji ekranu głównego urządzenia i uruchomić aplikację w trybie pełnoekranowym. za pomocą „Dodaj do ekranu głównego” w Chrome na Androida .

Google Chrome,

Lepszym rozwiązaniem jest użycie pliku manifestu aplikacji internetowej.

Plik manifestu aplikacji internetowej (Chrome, Opera, Firefox, Samsung)

Plik manifestu dla aplikacji internetowych to prosty plik JSON zawierający dewelopera, możliwość kontrolowania tego, jak aplikacja wyświetla się użytkownikowi aplikacji, z których spodziewają się jej użytkownicy (np. na ekranie głównym urządzenia mobilnego), jakie użytkownik może uruchomić i przede wszystkim jak może to zrobić. W Plik manifestu zapewni Ci jeszcze większą kontrolę nad aplikacją, skupiamy się wyłącznie na wprowadzaniu aplikacji na rynek. Oto najważniejsze kwestie:

  1. Informowanie przeglądarki o pliku manifestu
  2. Jak uruchomić

Po utworzeniu pliku manifestu i umieszczeniu go w witrynie musisz dodać tag linku ze wszystkich stron aplikacji:

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

Chrome obsługuje pliki manifestu od wersji 38 na Androida (październik 2014 r.) i zapewnia kontrolę nad sposobem wyświetlania aplikacji internetowej po jej zainstalowaniu na ekran główny (za pomocą właściwości short_name, name i icons) i w jaki sposób powinien zostać uruchomiony, gdy użytkownik kliknie ikonę uruchamiania (za pomocą aplikacji start_url, display i orientation).

Przykładowy plik manifestu znajdziesz poniżej. Nie pokazuje wszystkiego, co może się znajdować w pliku manifestu.

{
  "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"
}

Ta funkcja jest całkowicie progresywna i umożliwia tworzenie zintegrowane funkcje dla użytkowników przeglądarek, które obsługują daną funkcję.

Gdy użytkownik dodaje Twoją witrynę lub aplikację do ekranu głównego, traktować ją jak aplikację. Oznacza to, że należy kierować użytkowników funkcji aplikacji, a nie strony docelowej produktu. Przykład: jeśli użytkownik musi się zalogować w aplikacji, wejdź na odpowiednią stronę,

Aplikacje użytkowe

Większość aplikacji użytkowych od razu zacznie z niej korzystać. Dla osób, aplikacje, które prawdopodobnie warto uruchamiać jako samodzielny, tak jak pozostałe aplikacje. na platformie mobilnej. Aby poprosić aplikacji o wprowadzenie samodzielnej wersji, dodaj ten adres e-mail Plik manifestu aplikacji:

    "display": "standalone"
Gry

Większość gier od razu zacznie korzystać z pliku manifestu. Ogromny większość gier będzie chciała włączyć pełny ekran i wymuszała orientacji ekranu.

Jeśli tworzysz pionowy przewijak lub grę taką jak Flappy Birds, najprawdopodobniej chce, żeby gra zawsze wyświetlała się pionowo.

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

Jeśli z drugiej strony tworzysz grę logiczną lub grę taką jak X-Com, ustawienie w grze zawsze w orientacji poziomej.

    "display": "fullscreen",
    "orientation": "landscape"
Serwisy informacyjne

W większości przypadków witryny z wiadomościami mają czystą treść. Większość deweloperów nie przychodzi mi do głowy dodanie pliku manifestu do witryny z wiadomościami. Plik manifestu pozwala określić, co powinno się uruchomić (główna strona witryny z wiadomościami) Jak ją uruchomić (w trybie pełnoekranowym czy jako normalna karta przeglądarki).

Wybór należy do Ciebie i od tego, jak użytkownicy będą chcieli uzyskać dostęp do Twojej i uzyskiwanie dodatkowych informacji. Jeśli chcesz, żeby witryna miała w przeglądarce całą przeglądarkę czego oczekuje się od strony, możesz ustawić sposób wyświetlania na browser.

    "display": "browser"

Jeśli chcesz, by Twoja witryna informacyjna miała odczucie, że większość aplikacji z wiadomościami ich doświadczenia jako aplikacji i usunąć z interfejsu użytkownika całą przeglądarkę Chrome, możesz w tym celu ustaw wyświetlacz na standalone.

    "display": "standalone"

Zafałszuj: automatycznie ukrywaj pasek adresu

Możesz „zafałszować pełny ekran” dzięki automatycznemu ukrywaniu paska adresu:

window.scrollTo(0, 1);

To całkiem prosta metoda: strona wczytuje się, a pasek przeglądarki informuje i zejść z drogi. Niestety, nie jest on ustandaryzowany, obsługiwane. Trzeba też opanować wiele niekonwencjonalnych rozwiązań.

Na przykład przeglądarki często przywracają pozycję na stronie, gdy użytkownik powróci do niego. Zastosowanie window.scrollTo zastępuje tę irytację użytkownika. Aby obejść ten problem, musisz zapisać ostatnią pozycję w argumencie localStorage i rozwiązuj problemy skrajne (np. jeśli użytkownik ma strona otwiera się w wielu oknach).

Wytyczne dotyczące UX

Podczas tworzenia witryny w trybie pełnoekranowym liczby potencjalnych zmian związanych z wrażeniami użytkownika, o których należy pamiętać, tworzyć usługi, które spodobają się użytkownikom.

Nie korzystaj z elementów sterujących nawigacją

iOS nie ma fizycznego przycisku Wstecz ani gestu odświeżania. Dlatego musisz aby umożliwić użytkownikom poruszanie się po aplikacji bez obaw.

Możesz sprawdzić, czy pracujesz w trybie pełnoekranowym czy w trybie zainstalowanego na wszystkich głównych platformach.

iOS

W iOS możesz użyć wartości logicznej navigator.standalone, by sprawdzić, czy użytkownik uruchamianych z ekranu głównego.

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

Plik manifestu aplikacji internetowej (Chrome, Opera, Samsung)

Po uruchomieniu jako zainstalowanej aplikacji Chrome nie działa w trybie pełnego ekranu więc document.fullscreenElement zwraca wartość null, a selektory arkusza CSS nie wystarczają.

Gdy użytkownik poprosi o wyświetlenie pełnego ekranu za pomocą gestu w witrynie, standardowa są dostępne m.in. pseudoselektor CSS, dostosować interfejs użytkownika do stanu pełnego ekranu w ten sposób:

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

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

Jeśli użytkownicy uruchamiają Twoją witrynę z ekranu głównego, display-mode umożliwia korzystanie z multimediów zostanie ustawione na takie, które zostały zdefiniowane w pliku manifestu aplikacji internetowej. W przypadku na pełnym ekranie:

@media (display-mode: fullscreen) {
}

Jeśli użytkownik uruchomi aplikację w trybie samodzielnym, display-mode zapytanie o media będzie standalone:

@media (display-mode: standalone) {
}

Firefox

Gdy użytkownik zażąda pełnego ekranu w Twojej witrynie lub uruchomi aplikację w trybie pełnoekranowym są dostępne wszystkie standardowe pełnoekranowe interfejsy API, Pseudoselektor CSS, który umożliwia dostosowywanie interfejsu użytkownika do stanu pełnoekranowego. np.:

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

W IE pseudoklasa CSS nie zawiera łącznika, ale poza tym działa podobnie jak Chrome i Firefox.

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

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

Specyfikacja

Pisownia w specyfikacji odpowiada składni używanej przez IE.

selector:fullscreen {
  display: block;
}

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

Zatrzymywanie użytkownika w trybie pełnoekranowym

Działanie pełnoekranowego interfejsu API bywa czasem niezbyt pracochłonne. Dostawcy przeglądarek nie są dostępni aby zablokować użytkowników na pełnym ekranie, wymyślając dla nich mechanizmy jak najszybciej z pełnego ekranu. Oznacza to, że nie możesz utworzyć która obejmuje wiele stron, ponieważ:

  • Zautomatyzowana zmiana adresu URL za pomocą funkcji window.location = "http://example.com" powoduje przejście poza pełny ekran.
  • Użytkownik klikający link zewnętrzny na Twojej stronie opuści pełny ekran.
  • Zmiana adresu URL za pomocą interfejsu API navigator.pushState spowoduje też wyjście z metody podczas korzystania z pełnego ekranu.

Jeśli chcesz, aby użytkownik nadal korzystał z trybu pełnoekranowego, masz 2 możliwości:

  1. Aby przejść w tryb pełnoekranowy, użyj mechanizmów aplikacji internetowej z możliwością zainstalowania.
  2. Zarządzaj interfejsem i stanem aplikacji za pomocą fragmentu #.

Stosując #syntax do aktualizowania adresu URL (window.location = "#somestate") oraz nasłuchiwanie zdarzenia window.onhashchange, możesz użyć własnej przeglądarki stosu historii do zarządzania zmianami stanu aplikacji, zezwalaj użytkownikowi na lub przycisk Wstecz albo automatyczny przycisk Wstecz. za pomocą interfejsu History API w ten sposób:

window.history.go(-1);

Pozwól użytkownikowi wybrać, kiedy ma włączyć pełny ekran

Nie ma nic bardziej irytującego dla użytkownika niż jakaś strona internetowa. niespodziewane. Gdy użytkownik przechodzi do Twojej witryny, nie próbuj go nakłonić do na pełnym ekranie.

Nie przechwytuj pierwszego zdarzenia dotknięcia i nie wywołaj funkcji requestFullscreen().

  1. To irytujące.
  2. Przeglądarki mogą w przyszłości pytać użytkownika o podanie co pozwala aplikacji na pełny ekran.

Jeśli chcesz uruchamiać aplikacje na pełnym ekranie, zastanów się nad użyciem na poszczególnych platformach.

Nie rozsyłaj spamu w celu zainstalowania aplikacji na ekranie głównym

Jeśli planujesz wyświetlać treści na pełnym ekranie za pomocą mechanizmów zainstalowanych aplikacji, które są ważne dla użytkownika.

  • Zachowaj dyskrecję. Użyj banera lub stopki, aby poinformować ich, że mogą zainstalować .
  • Jeśli użytkownik odrzuci prośbę, nie pokazuj go ponownie.
  • Przy pierwszej wizycie raczej nie będą chcieli zainstalować aplikacji, chyba że są zadowoleni z Twoich usług. Rozważ zachęcanie ich do instalacji po pozytywne interakcje z witryną.
  • Jeśli użytkownik regularnie odwiedza Twoją witrynę i nie instaluje aplikacji, prawdopodobnie nie zainstaluje jej w przyszłości. Nie spamuj ich.

Podsumowanie

Chociaż nie mamy w pełni ustandaryzowanego ani wdrożonego interfejsu API, korzystanie z niektórych wskazówek zawartych w tym artykule wykorzystanie całego ekranu, niezależnie od klienta.

Prześlij opinię