So optimierst du deinen Space für iOS-Geräte

Hier erfährst du, wie du eine optimale Darstellung und Performance deiner Spaces auf iOS-Geräten sicherstellst.

iOS-Geräte haben seit iOS 17 besondere Anforderungen an die Darstellung von Webinhalten, da Apple die Speichernutzung und Performance in Browser-Tabs stark einschränkt. Das betrifft insbesondere komplexe und große Spaces, die daher auf iOS manchmal nicht korrekt angezeigt werden.

Damit dein Space auf allen Geräten, besonders iOS, reibungslos funktioniert, gibt es ein paar Optimierungs-Tipps in diesem Artikel. Am Ende findest du auch eine Erklärung wie du abhängig vom Endgerät eine optimierte Version deines Spaces auf deiner eigenen Webseite dynamisch anzeigen kannst.

Warum ist diese Anpassung notwendig?

Apple begrenzt auf iOS den Speicherverbrauch für Browser-Tabs und damit auch WebGL-Anwendungen, was besonders 3D-Anwendungen betrifft. Diese Begrenzung führt dazu, dass auch mobil-optimierte Spaces auf iOS nicht immer geladen werden können, vor allem, wenn der Texturenspeicher und die Anzahl der Objekte zu hoch sind.

Wie kannst du deinen Space für iOS optimieren?

Erstelle zu Beginn eine Kopie deines Spaces, damit du die Anpassungen nicht im Original-Space machst. Um diese Kopie deines Spaces für iOS-Geräten zu optimieren, kannst du folgende Maßnahmen ergreifen:

1. Texturenspeicher reduzieren

Reduziere die Größe der verwendeten Texturen so weit wie möglich. Je weniger Speicher durch Texturen beansprucht wird, desto besser läuft dein Space auf iOS. Lösche dafür nicht benötigte Bilder und lade Videos auschließlich auf einer Hosting-Plattform hoch (Youtube, Vimeo,...) und verlinke sie in Modalen in deinem Space (Videos einbetten & hochladen im Space Editor).

2. Objekte im Space minimieren

Die Anzahl der Objekte im Space sollte ebenfalls reduziert werden. Teste den Space auf iOS und entferne unnötige Objekte, bis die Performance stabil ist. Du kannst die Objekte auch über die Objektliste im Space Editor ausblenden.

3. Avatare für Mobilgeräte deaktivieren

Deaktiviere das Avatarsystem in deinem Space oder verwende den URL-Anhang ?mobile_avatars_enabled=false, um die Avatare nur auf Mobilgeräten auszuschalten. Dies entlastet die Performance erheblich.

4. Mobile Max Texture Size einstellen

Setze in den Space-Einstellungen die "Mobile Max Texture Size" auf 32. Dies reduziert die Texturgröße auf mobilen Geräten und verbessert die Performance. Damit deine Medien im Space trotzdem korrekt angezeigt werden, kannst du im Space Editor eine feste Auflösung für jede einzelne Medien-Plane einstellen. Hier erfährst du mehr dazu: Auflösungseinstellungen für Planes im Space Editor

Space dynamisch abhängig vom Endgerät einbinden

Damit du auf iOS-Geräten eine abgespeckte Version deines Spaces und auf allen anderen Geräten die volle Version anzeigen kannst, kannst du das folgende Skript nutzen. Es erkennt, ob ein iOS-Gerät verwendet wird, und bindet entsprechend den richtigen Space ein.

Bevor du mit der Einbettung beginnst, stelle sicher, dass du eine Kopie deines Spaces mit den oben genannten Tipps optimiert hast. Prüfe vorab, ob diese Version auf iOS-Geräten korrekt dargestellt wird.

Schritt 1: Skript für die Erkennung des Geräts und die iFrame-Erstellung

Füge den folgenden Code in den head-Bereich deiner Webseite ein, um festzustellen, ob ein iOS-Gerät verwendet wird und füge die URLs des normalen Spaces und der optimierten Space-Kopie ein:

<script>
      function isIOS() {
       return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      }
      window.onload = function() {
        // URLs für iOS und Standard-Space hier einfügen
        const iosURL = 'https://iOS-Space-Link hier einfügen?autostart=1';
        const standardURL = 'https://Standard-Space-Link hier einfügen?autostart=1';
        
        const iosHinweis = document.getElementById('ios-hinweis');
        const iframeContainer = document.getElementById('iframe-container');
        
        // Hier kannst du die Stileigenschaften für das iFrame festlegen
        const iframeStyles = {
          position: 'absolute',
          top: '0',
          left: '0',
          bottom: '0',
          right: '0',
          width: '100%',
          height: '100%'
        };
        function applyStyles(element, styles) {
         for (let style in styles) {
           element.style[style] = styles[style];
         }
        }
        if (isIOS()) {
          // iOS-spezifische Anzeige
          iosHinweis.style.display = 'block';
          // iFrame für iOS erstellen und Stile anwenden
          const iosIframe = document.createElement('iframe');
          iosIframe.setAttribute('src', iosURL);
          iosIframe.setAttribute('id', 'ios-iframe');
          iosIframe.setAttribute('allow', 'vr; xr; accelerometer; magnetometer; gyroscope; autoplay; fullscreen; microphone; display-capture');
          iosIframe.setAttribute('allowfullscreen', 'true');
          iosIframe.setAttribute('mozallowfullscreen', 'true');
          iosIframe.setAttribute('webkitallowfullscreen', 'true');
          applyStyles(iosIframe, iframeStyles); // Stile anwenden
          iframeContainer.appendChild(iosIframe);
        } else {
          // Standard Anzeige
          // iFrame für Standard erstellen und Stile anwenden
          const defaultIframe = document.createElement('iframe');
          defaultIframe.setAttribute('src', standardURL);
          defaultIframe.setAttribute('id', 'default-iframe');
          defaultIframe.setAttribute('allow', 'vr; xr; accelerometer; magnetometer; gyroscope; autoplay; fullscreen; microphone; display-capture');
          defaultIframe.setAttribute('allowfullscreen', 'true');
          defaultIframe.setAttribute('mozallowfullscreen', 'true');
          defaultIframe.setAttribute('webkitallowfullscreen', 'true');
          applyStyles(defaultIframe, iframeStyles); // Stile anwenden
          iframeContainer.appendChild(defaultIframe);
        }
      };
    </script>

Schritt 2: Hinweis und iFrame-Container einfügen

Füge den folgenden HTML-Code in den Bereich deiner Webseite ein, wo dein Space eingebettet werden soll. Dieser sorgt dafür, dass auf iOS-Geräten ein Hinweis angezeigt wird und der richtige Space geladen wird.

<!-- Hinweis für iOS Geräte -->
<div id="ios-hinweis" style="display: none; background-color: #ffcc00; padding: 10px; text-align: center;">
<strong>Hinweis:</strong> Sie sehen eine reduzierte Version des 3D-Spaces. Für
eine Version mit allen Features, nutzen Sie bitte ein Desktop-Gerät.
</div>

<!-- Container für iFrame -->
<div id="iframe-container"></div>

Schritt 3: Styling für den iFrame-Container

Optional kannst du die Größe und das Seitenverhältnis des iFrames anpassen. Hier ein Beispiel für eine 16:9 Aspect Ratio:

<style> 
 #iframe-container { 
    position: relative; 
    width: 100%; 
    padding-top: 56.25%; /* Für eine 16:9 Aspect Ratio */ 
    overflow: hidden; 
  } 
</style>

Mit diesen Schritten kannst du sicherstellen, dass dein Space auf allen Endgeräten optimal dargestellt wird und iOS-Nutzer die angepasste Version deines Space angezeigt bekommen.