gjbarter Posted September 11, 2016 Share Posted September 11, 2016 Hi Everyone, I'm sure this has been discussed previously but as I know Apple like to throw updates out to this part of Mobile Safari I thought I would ask again to get the most up to date information. I'm on the lookout for a solution to ensure fullscreen when viewing content in horizontal orientation on mobile Safari. I know that there used to minimal-ui but that got removed (in iOS7 i think?), I was just wondering if there had been a new way introduced to ensure the fullscreen is present and the top address is bar is hidden in horizontal view? If there isn't a simple command like minimal-ui then what's the recommended action here? Thanks in advance! Garry Quote Link to comment Share on other sites More sharing options...
PixelPicoSean Posted September 11, 2016 Share Posted September 11, 2016 Simply adjust the size of your canvas or container to the screen size and it will be fullscreen automatically, but if the player touched top or bottom area the address bar shows again. Don't know how to improve it now. Quote Link to comment Share on other sites More sharing options...
gjbarter Posted September 12, 2016 Author Share Posted September 12, 2016 Problem with adjusting to 100% is that on mobile safari it overlays the address bar and therefore the 100% shows underneath the bar. Not great. Have been away from this type of dev for a while and was really hoping Apple had pulled their finger out by now... Quote Link to comment Share on other sites More sharing options...
themoonrat Posted September 15, 2016 Share Posted September 15, 2016 There is no nice way, I'm afraid. The best thing to do is compare the window.innerHeight to $(window).height() If they are the same, then the url bar is hidden. If they are not the same, then the url bar is shown. In this case, put a large div overlaying the entire screen, giving it a lot of height. Have a message on the div instructing the player to 'swipe up to play'. This will simulate scrolling down the webpage, and in safari this will then hide the url bar. Once window.innerHeight matches $(window).height() again you can hide the overlay. Not fun, not sexy, but it's the only way :/ Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.