Recommended Posts

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? 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 :huh: 
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") 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.