How to make a
exactly fill the browser window, including Mobile Safari as of 2019

I’m working on a single-page web app, that will most typically be used on mobile devices. One of its features is a map mode, which temporarily takes over the entire browser window; a distance scale and some controls are attached to the four corners of the map. Here’s a little screenshot of the map so you can tell what I’m talking about:

Screenshot of map overlay

The map is implemented as a <div> with position: fixed and all four coordinates zero; I also temporarily set the <body> to overflow: hidden while the map is visible to handle the case of the underlying app display being scrolled away from the origin. That’s sufficient to make the map work exactly how I want on desktop browsers. Mobile browsers also required that I give a meta viewport tag with something like "width=device-width,user-scalable=no" in order to make the visible area of the window exactly correspond with the viewport.

This all worked beautifully a few years back when I originally wrote this app, but somewhere along the line iOS Safari stopped honoring any of the meta viewport options involving scaling – apparently too many sites were misapplying the tag, resulting in text that was unreadably small, yet unzoomable. Currently, if you enable the map on this browser, you’re likely to get a slightly zoomed-in view, that cuts off those buttons on the right and bottom – and you can’t do anything about it, because all touches are interpreted as zoom/pan gestures for the map, rather than browser scrolling. The map isn’t terribly useful without the features accessed through those buttons – and without the top-right button, you can’t even close the map. The only way out is to reload the page, which may result in loss of unsaved data.

I’m definitely going to be adding the use of history.pushState/onpopstate so that the map overlay behaves like a separate page. You’d be able to get out of the map mode using the browser’s Back button – but that doesn’t address the rest of the loss of the functionality due to missing buttons.

I’ve considered using .requestFullscreen() to implement the map overlay, but it’s not supported everywhere that the app would otherwise be usable. In particular, it apparently doesn’t work at all on iPhones, and on iPads you get a status bar and a huge ‘X’ button overlaying your content – my distance scale would likely not be readable any more. It’s not semantically what I really want, anyway – I need the full window, not the full screen.

How do I get a full-window display working on modern browsers? All the information I can find on the subject talks about using the meta viewport tag, but as I mentioned that no longer works.

Answer

Solution

Set the fullscreen div’s height to window.innerHeight with JavaScript and then update it on window resizes.

Same problem here:

https://stackoverflow.com/a/37113430/8662476

More info:

Attribution
Source : Link , Question Author : jasonharper , Answer Author : Maurici Abad

Leave a Comment