Igor Georgiev Posted June 19, 2017 Share Posted June 19, 2017 Hello guys. I am struggling with having my game to run on minimal-ui on iOS safari. That is where the address bar becomes smaller when you scroll. I have found a game that does that, but how the hell they do it? CLICK Does anyone know how to achieve this? Quote Link to comment Share on other sites More sharing options...
Zendrael Posted June 19, 2017 Share Posted June 19, 2017 Hey Igor! check their HTML. There are some meta tags that do it for you. Quote Link to comment Share on other sites More sharing options...
bubamara Posted June 19, 2017 Share Posted June 19, 2017 minimal-ui viewport property isn't there since iOS8 don't know what the game you linked is using, but there is : https://github.com/gajus/brim which you can use Quote Link to comment Share on other sites More sharing options...
themoonrat Posted June 19, 2017 Share Posted June 19, 2017 Indeed, the only way is to simulate scrolling down the webpage, as ios safari lessens the top bar in that scenario. To simulate scrolling down the webpage, you need to put an overlay div on top of your game, that is taller than your game, to give enough height to scroll down. Igor Georgiev 1 Quote Link to comment Share on other sites More sharing options...
Igor Georgiev Posted June 19, 2017 Author Share Posted June 19, 2017 38 minutes ago, Zendrael said: Hey Igor! check their HTML. There are some meta tags that do it for you. It is not a meta tag, I think it is something more complicated. But I will investigate. 37 minutes ago, bubamara said: minimal-ui viewport property isn't there since iOS8 don't know what the game you linked is using, but there is : https://github.com/gajus/brim which you can use Thank you, that seems to be a decent solution. Definitely worth the try. Although I was looking for a more plain JS solution, but if it works, why not. 23 minutes ago, themoonrat said: Indeed, the only way is to simulate scrolling down the webpage, as ios safari lessens the top bar in that scenario. To simulate scrolling down the webpage, you need to put an overlay div on top of your game, that is taller than your game, to give enough height to scroll down. Interesting.... so if I have an overlaying div that is bigger and scroll-able and when scrolling the address bar shrinks, how do I know when to stop the scroll? Would it be a lot of trouble for you to provide a simple example? I kinda see your point, but I am wondering how I would know when to remove this div and how to keep the actual game div in good working order? Quote Link to comment Share on other sites More sharing options...
themoonrat Posted June 19, 2017 Share Posted June 19, 2017 Pretty much slot game on sky vegas or any other website played on an ios device will have this 'swipe up to play' mechanism. You detect to 'stop' by looking at the window.innerHeight compared to the window.screen.height. Igor Georgiev and labrat.mobi 2 Quote Link to comment Share on other sites More sharing options...
Igor Georgiev Posted June 19, 2017 Author Share Posted June 19, 2017 thank you very much Quote Link to comment Share on other sites More sharing options...
Igor Georgiev Posted June 20, 2017 Author Share Posted June 20, 2017 22 hours ago, themoonrat said: Pretty much slot game on sky vegas or any other website played on an ios device will have this 'swipe up to play' mechanism. You detect to 'stop' by looking at the window.innerHeight compared to the window.screen.height. Hello again I managed to do it the following way: in index.html <body> <div id="content"> <div id="overlay"></div> </div> <script src="scripts/game.js"></script> <script src="scripts/pixi-particles.js"></script> </body> in main.css html { width: 100%; height: 110%; margin: 0px; } body { height: inherit; width: inherit; margin: 0px; display: flex; justify-content: center; align-items: center; background-color: #000000; } #overlay{ position: fixed; width: 100%; height: 2000px; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(0, 0, 0, 0.5); } It works very well, unless I swipe too quickly. Do you think that 2000px that I use for height are too much? Maybe I can use the height + some pixels. Quote Link to comment Share on other sites More sharing options...
bubamara Posted June 20, 2017 Share Posted June 20, 2017 use the damn brim it does everything for you Quote Link to comment Share on other sites More sharing options...
Insi Posted June 21, 2017 Share Posted June 21, 2017 Yeah, I've spent few days to do it without brim and have a failure - it don't want to work distinctly, sometimes it quit fullscreen after safari interface hidden and so on. Maybe something happends when viewport size in "viewport pixels" compared with window size in real pixels amount - like any problem with fractional size round. Don't know how brim do this so strict. May be it's some kind of magic Anyway in brim sources you could find a lot of things which I never want to do by myself, like hardcoded sizes of each ios device in both states (fullscreen and "window") Quote Link to comment Share on other sites More sharing options...
Osric Posted March 7, 2018 Share Posted March 7, 2018 Hi all, Is anyone able to give me some hints on how to use Brim? I am really struggling: - the demo included seems to be non-functional (all of the paths were broken, and I cannot tell if it is actually set up correctly or not) - Absoloutely nothing happens in the demo (at least, testing on iOS 11.2.5 on an iPhone 7 - although, it seems this was reported a year ago in the guthub issues tracker) - the project doesn't seem to have been actively maintained for quite a long time, and any hosted demos or documentation that the author might have had seem to have gone I am happy to do the required maintenance myself to get it working, but due to the non-functional demo, its not really clear to me how I am supposed to use the tool at the moment (or what exactly the issue is) Thanks in advance! 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.