How to optimize your Space for iOS devices

Here you'll learn how to ensure optimal display and performance of your Spaces on iOS devices.

iOS devices have special requirements for web content display since iOS 17, as Apple has significantly restricted memory usage and performance in browser tabs. This particularly affects complex and large Spaces, which may not always display correctly on iOS.

To make sure your Space works smoothly on all devices, especially iOS, there are a few optimization tips in this article. At the end, you'll also find an explanation on how to dynamically display an optimized version of your Space on your own website, depending on the device.

Why is this adjustment necessary?

Apple limits memory consumption for browser tabs on iOS, which affects WebGL applications, particularly 3D applications. This restriction means that even mobile-optimized Spaces may not always load on iOS, especially if the texture memory and the number of objects are too high.

How can you optimize your Space for iOS?

Start by making a copy of your Space, so you're not making adjustments in the original Space. To optimize this copy of your Space for iOS devices, you can take the following steps:

1. Reduce texture memory

Reduce the size of the textures used as much as possible. The less memory textures use, the better your Space will run on iOS. Delete any unnecessary images and upload videos exclusively on a hosting platform (YouTube, Vimeo, etc.) and link them in modals within your Space (Embedding & uploading videos in the Space Editor).

2. Minimize objects in the Space

The number of objects in the Space should also be reduced. Test the Space on iOS and remove unnecessary objects until performance is stable. You can also hide objects using the object list in the Space Editor.

3. Disable avatars for mobile devices

Disable the avatar system in your Space or use the URL parameter ?mobile_avatars_enabled=false to turn off avatars only on mobile devices. This significantly reduces performance load.

4. Set Mobile Max Texture Size

In the Space settings, set the "Mobile Max Texture Size" to 32. This reduces the texture size on mobile devices and improves performance. To ensure your media is still displayed correctly in the Space, you can set a fixed resolution for each media plane in the Space Editor. Learn more here: Resolution settings for planes in the Space Editor.

Dynamically embed your Space depending on the device

To display a simplified version of your Space on iOS devices and the full version on all other devices, you can use the following script. It detects whether an iOS device is being used and embeds the appropriate Space.

Before you start embedding, make sure that you've optimized a copy of your Space with the tips mentioned above. Test this version in advance to ensure it displays correctly on iOS devices.

Step 1: Script for device detection and iFrame creation

Insert the following code into the head section of your website to determine if an iOS device is being used, and add the URLs of both the regular Space and the optimized Space copy:

<script>
      function isIOS() {
       return /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      }
      window.onload = function() {
        // Insert URLs for iOS and standard Space here
        const iosURL = 'https://insert-iOS-Space-link-here?autostart=1';
        const standardURL = 'https://insert-standard-Space-link-here?autostart=1';
        
        const iosHinweis = document.getElementById('ios-hinweis');
        const iframeContainer = document.getElementById('iframe-container');
        
        // Define the style properties for the iFrame
        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-specific display
          iosHinweis.style.display = 'block';
          // Create iFrame for iOS and apply styles
          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); // Apply styles
          iframeContainer.appendChild(iosIframe);
        } else {
          // Standard display
          // Create iFrame for standard devices and apply styles
          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); // Apply styles
          iframeContainer.appendChild(defaultIframe);
        }
      };
    </script>

Step 2: Insert the hint and iFrame container

Insert the following HTML code in the area of your website where your Space should be embedded. This ensures that a hint is displayed on iOS devices and the correct Space is loaded.

<!-- iOS devices hint -->
<div id="ios-hinweis" style="display: none; background-color: #ffcc00; padding: 10px; text-align: center;">
<strong>Hint:</strong> You are viewing a simplified version of the 3D Space. For a version with all features, please use a desktop device.
</div>

<!-- Container for iFrame -->
<div id="iframe-container"></div>

Step 3: Styling for the iFrame container

You can optionally adjust the size and aspect ratio of the iFrame. Here's an example for a 16:9 aspect ratio:

<style> 
 #iframe-container { 
    position: relative; 
    width: 100%; 
    padding-top: 56.25%; /* For a 16:9 aspect ratio */ 
    overflow: hidden; 
  } 
</style>

With these steps, you can ensure that your Space is optimally displayed on all devices, and iOS users will see the adapted version of your Space.