Mein Beispiel für WebGL und der Monitor-Test nutzen zur Darstellung ein Canvas-Element. Zusätzlich ist jeweils die Möglichkeit vorhanden, die Darstellung auf den Vollbild-Modus umzuschalten. Technisch wird das mit dem Fullscreen API realisiert. Die Vorgehensweise ist dabei immer gleich:
- Wenn der Knopf für den Vollbild-Modus angeklickt wird, wir mit
requestFullscreen()das Canvas-Element auf Vollbild-Darstellung umgestellt. - Ein Handler, der auf diesen Wechsel reagiert, korrigiert im Vollbild-Modus die Breite und Höhe des Elementes auf die Bildschirm-Größe unter Berücksichtigung der
window.devicePixelRatio, damit die native Auflösung des Gerätes verwendet wird.
Dabei habe ich allerdings mehrere Probleme beobachtet:
Wenn das Canvas-Element bereits im Vollbild-Modus ist, liefern einige Browser für screen.width und screen.height nicht die echte Abmessungen des Bildschirms zurück, sondern die Größe des Browserfensters. Ermittelt man dagegen die Werte bevor man requestFullscreen() aufruft, sind sie korrekt.
Auf manchen mobilen Browsern werden Canvas-Elemente mit requestFullscreen() nicht auf volle Displaygröße gebracht, sondern haben immer einen schwarzen Rand. Woran das liegt, habe ich nicht herausgefunden. Ich benutze aber auch ein umgebendes DIV-Element als Container, damit ich das Canvas-Element für hochauflösende Bildschirme skalieren kann. Wenn nun statt dem Canvas der DIV-Container in den Vollbild-Modus umgeschaltet wird, wird auch auf mobilen Browsern das Display vollständig genutzt.
Volle Displaygröße auf mobilen Geräten nutzen
Die Funktion requestFullscreen() bietet einen optionalen Parameter zur Übergabe von Optionen für die Darstellung (siehe auch die Dokumentation dazu). Mit { navigationUI: "hide" } kann man dafür sorgen, dass die Navigationsleiste auf dem Display ausgeblendet wird und das komplette Display benutzt wird:
container.requestFullscreen({ navigationUI: "hide" });
Um diese Darstellung wieder zu verlassen, wischt man von oberen oder unteren Rand des Displays in Richtung Mitte, dann erscheint die Navigationsleiste wieder und man kehrt mit Berührung auf das „Zurück“-Symbols wieder zur normalen Ansicht zurück.
