Jump to content

iOS soft fullscreen. How?

Igor Georgiev

Recommended Posts

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?

Link to comment
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


	<div id="content">
		<div id="overlay"></div>

	<script src="scripts/game.js"></script>
	<script src="scripts/pixi-particles.js"></script>


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;

  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.

Link to comment
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") 

Link to comment
Share on other sites

  • 8 months later...

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!

Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...