Openlayers3 ol.control.FullScreen doesn't work on iOS

Question

Safari on iOS doesn't have the fullscreen API, so that, as stated in the doc, ol.control.FullScreen is not usable.

Is there a recommended workaround ? I'm too sad not being able to set my maps in fullscreen on iPads!!

Thanks,

Olivier

Answer 1

You can find some other recommendations in this other response: Full screen api HTML5 and Safari (iOS 6)

Especially, using meta tags:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

And scrolling the page:

$('body').scrollTop(1);

Answer 2

My work-around for iOS (I'm using OpenLayers 6) is to add an alternative "PseudoFullScreen" control that hides my branding & navigation elements so that the map can at least take up the full browser area when the browser doesn't support the Fullscreen API. This isn't true full-screen, but it makes my map application usable when on small mobile screens.

You might need to tweak this for your purposes to change body margins/padding and/or toggle additional elements.

  /**
   * Copied from ol.control.FullScreen.
   *
   * @return {boolean} Fullscreen is supported by the current platform.
   */
  function isFullScreenSupported() {
      var body = document.body;
      return !!(body.webkitRequestFullscreen ||
          (body.msRequestFullscreen && document.msFullscreenEnabled) ||
          (body.requestFullscreen && document.fullscreenEnabled));
  }

  // Use the default FullScreen control if supported.
  if (isFullScreenSupported()) {
    map.addControl(new ol.control.FullScreen());
  } else {
    
    // Add an "almost full-screen" control that hides/shows the branding and menu.
    // This assumes that the header is in an element with id "header" and the map
    // is in an element with id "map".
    class PseudoFullScreen extends ol.control.FullScreen {

      /**
       * Constructor.
       */
      constructor(opt_options) {
        super(opt_options);
        // Remove the unsupported class that hides the control as we'll do
        // handle FullScreen a different way.
        this.element.className = this.element.className.replace('ol-unsupported', '');
      }

      /**
       * Override full-screen handling to hide/show the branding & navigation.
       */
      handleFullScreen_() {
        $('header').toggle(500, $.proxy(this.handleFullScreenChange_, this));
      }

      /**
       * Override full-screen change handling.
       */
      handleFullScreenChange_() {
        if ($('header').is(':hidden')) {
            this.setClassName_(this.button_, true);
            this.replaceNode(this.labelActiveNode_, this.labelNode_);
        }
        else {
            this.setClassName_(this.button_, false);
            this.replaceNode(this.labelNode_, this.labelActiveNode_);
        }
    
        this.updateMapHeight();
      }

      /**
       * Copied from ol.dom to be usable in this context.
       *
       * @param {Node} newNode Node to replace old node
       * @param {Node} oldNode The node to be replaced
       */
      replaceNode(newNode, oldNode) {
          var parent = oldNode.parentNode;
          if (parent) {
              parent.replaceChild(newNode, oldNode);
          }
      }
      
      /**
       * Update our map height to full window height.
       */
      function updateMapHeight() {
        var new_height = $(window).height() - $('#map .ol-viewport').offset().top - parseInt($("body").css("margin-bottom")) - parseInt($("body").css("padding-bottom"));
        $('#map').height(new_height);
    
        var map = this.getMap();
        if (map) {
          // Notify the map that it should adjust to avoid stretching.
          map.updateSize();
        }
        return new_height;
     }

    }
    map.addControl(new PseudoFullScreen);

  }