I’ve run into a bit of a problem with my app running on mobile browsers. I want my app to be fullscreen from the start or at least for the user to be able to switch to fullscreen as the address bars waste a lot of space on smaller screens.
By default mobile browsers only seem to hide the address bar when the user scrolls down a page. However when the canvas element just fills the entire browser window and all of my app’s UI is on the canvas, there is nothing to scroll. The web page the canvas is on is always the size of the browser window and no scrolling ever happens except inside div elements in the UI.
Is there a way to hide the address bars that works on all mobile browsers? I’ve tried element.requestFullscreen, which only seems to work on my samsung browser but not on chrome, firefox or safari. I’ve also tried a trick where I set the page height (height of the html element) a bit larger than the window, use javascript to automatically scroll down and then reset the html element to the size of the window but that doesn’t remove the address bar either, it seems to require actual user input.
On android at least, it might be worth taking a look here? I cannot comment on how many devices/browsers this will work on, but it’s definitely worth a shot. You could also add a simple modal window when the app first loads telling the user to press a fullscreen button on unsupported devices/browsers.
I guess one option would be to have a “splash screen” at the top of the page and then ask the user to scroll down to the canvas element though that feels a bit cumbersome. How can I make the canvas not go full screen from start and set its “bottom: 0” in css so it sits at the bottom of the page? I’ve tried meddling with the canvas element’s #application-canvas in css but it seems to always take its rules from some built-in “fill-mode-FILL-WINDOW” class.
Yes, you may need to patch the engine as it does change CSS rules at runtime (something we are looking to change in the future).
You would have to change the existing CSS rules to do what you need. Also be warned that you may run into issues with functions like screen to world or where you need to rely on touch/mouse position for input if you allow the user to scroll down.
iOS Safari is very tricky to work in my experience so I can’t help that much unfortunately.
If that’s how you want to do it, can’t you just use iframe? Should be much easier to implement, and you can change it’s properties the way you tried before with Canvas. iframe should work better with Safari as well.