8

As shown below, beides the '+' icon is the full screen button.

Map Issue

When clicked on it, it does not go full screen.

I tried basic jQuery :

 $("#fullScreen-btn").css({height: 100%, width: 100%});

This does not seem to work.

I need it to work like we press F11 on browsers, it must go full screen on mobile (not the google maps app)

Can anyone help me out here ?

4
  • Is this a react native app running on android? And you want it to be able to go to full screen hiding the android UI?
    – Mor Paz
    Jun 27, 2017 at 12:23
  • I need it to go fullscreen but it is a javascript-jquery based app and it is not a react native app. Jun 27, 2017 at 12:35
  • share more code. Jun 27, 2017 at 13:18
  • @AshishBahl check the answer and let me know if you have any problem
    – Sagar V
    Jun 27, 2017 at 15:01

4 Answers 4

8
+50

In order to make a Mobile Browser visible in full screen mode, you should use the requestFullscreen()

Add an event listener to the button dynamically when it gets loaded as

button.addEventListener("click",function(){
      document.body.requestFullscreen();
});

Or

button.addEventListener("click",function(){
         document.documentElement.requestFullscreen();
});

Works for Chrome for android.

Also many browser for Computers also have this ability.

Read more on MDN

4

Your jQuery needs correction - you missed the quotes, try this:

$("#fullScreen-elm").css({"height": "100%", "width": "100%"});

and moreover you need to update this css for the screen element you want to resize and not the fullscreen button.

And yes, Element.requestFullscreen() is definitely an other option refer MDN

1
  • I would like to have comments on downvotes. Please explain your(whomsoever) reason to downvote the answer. It will help me in improving my answer.
    – Upasana
    Jun 28, 2017 at 21:57
1

Try this. I calculated the height separately to achieve the results. Tested in android device.

$(document).ready(function() {
  let height = $(document).height();
  $('.fullscreen').on('click', function() {
    $('iframe').css({
      height: height,
      width: '100%'
    });
  });
});
body {
  margin: 0;
  padding: 0;
}

.fullscreen {
  position: absolute;
  top: 10px;
  right: 10px;
}
<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d423283.3363121453!2d-118.69191670818714!3d34.020750397391296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2srw!4v1499159650271"
    width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
  <div class="container">
    <input type="button" name="fullscreen" value="fullscreen" class="fullscreen" />
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>

</html>

1

You can activate full screen mode using JavaScript without jQuery.

<!DOCTYPE html>

<html>

<head>
    <title>Full Screen Test</title>
</head>

<body id="body">
    <h1>test</h1>

    <script>
    var elem = document.getElementById("body");

    elem.onclick = function() {
        req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
        req.call(elem);
    }
    </script>
</body>

</html>

One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action1 (e.g. on page load).

Here is a cross browser function to toggle full screen mode (as obtained from the MDN):

function toggleFullScreen() {
  if (!document.fullscreenElement &&    // alternative standard method
      !document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {  // current working methods
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    }
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    }
  }
}

For more information, check out the MDN page on full screen APIs.

If you need a plugin that supports versions of IE prior to IE11 (IE8-10), take a look at jQuery.fullscreen. IE did not support this feature natively until IE11.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.