0

I'm trying to make a page go full screen as soon as the user starts scrolling on mobile.

I'm aware of the fact that as stated in this mdn link , for usability reasons, the browser will only allow a page to occupy the full-screen in response to a user gesture, therefore, I need to place my request to full-screen within a fast event handler so I did the following:

function goFullScreen() {
  if (document.fullscreenEnabled) {
    requestFullscreen(document.documentElement);
  }
  document.removeEventListener('touchend', goFullScreen);
}

document.addEventListener('touchend', goFullScreen);

However, when I scroll the page I get this result on chrome:

enter image description here

I must be missing something here because when I click, without dragging the pointer, it does work.

PS: full version of the script can be found in this [fiddle] .. (https://jsfiddle.net/OsvaldoM/0kpm1s93/13/) also , this is just an experiment so please don't mind the terrible effects it would have to UX

Osvaldo Maria
  • 340
  • 5
  • 14
  • This sounds like a terrible user experience – Katajun Mar 12 '18 at 18:28
  • 1
    `for usability reasons`!! When the page certainly goes full screen while scrolling i would leave it immidiately. – Jonas Wilms Mar 12 '18 at 18:29
  • Yeah I'd hate to scroll a website and see it fill my entire screen. – Phiter Mar 12 '18 at 18:30
  • 2
    full screen mode can only be requested by a user gesture (an event like click). Scroll is not a user gesture. – Stefan Octavian Mar 12 '18 at 18:33
  • thank you @StefanOctavian , I probably can't distinguish what is a user gesture from what is not(I was sure scroll events were) . so I replaced `scroll` with `touchend` but it behaves the same so it probably works only with events similar to click. – Osvaldo Maria Mar 13 '18 at 11:16

0 Answers0