0 Favourites

Hide address bar - Not working

  • Hello,

    I have tried the built in setting "Hide address bar" as well a bunch of JavaScript scripts but all fail. I also tried some things with Browser objects. Seems I get some results when I set full-screen to off. However I want to use scale to fit all mobile screens seamlessly.

    Any advice will be amazing on how to hide that darn Address Bar for a Web Mobile Game..

    Thanks <img src="smileys/smiley17.gif" border="0" align="middle" />

  • It should be hidden once the game is compiled. Are you just using Preview over Wifi right now?

  • It's only supported on iPhone after exporting at the moment. Is that what you were checking with?

  • Ashley I'm getting a black bar across the top of the screen on iPhone when I have it set to hide the address bar, and my game is pushed down below this bar. Any idea what this is?

  • Sounds like a bug, make a report in the bugs forum if something doesn't seem to work.

  • I am testing live on my server on android via scale with no results.

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Wrangler: I get the same results on Android when I use CSS or JavaScript to hide the bar. It adds a margin at the top which triggers the address bar to hide however pushes my layout down.

  • Well, got this to work. It seems it only works with "crop". Delete everything above the CSS and add the following. (HOWEVER) I now notice that sometimes if you rotate the phone the bar will come back and push the layout up. Ehhh this is hopeless.

    -------------------------------------------------------------

    <!DOCTYPE html>

    <meta charset=utf-8>

    <meta name=viewport content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name=apple-mobile-web-app-capable content=yes>

    <meta name=apple-mobile-web-app-status-bar-style content=black>

    <title>Test fullscreen</title>

    <style>

    html, body {

    margin: 0;

    padding: 0;

    }

    #page {

    position: absolute;

    width: 100%;

    height: 100%;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    }

    </style>

    <div id=page></div>

    <script>

    var page = document.getElementById('page'),

        ua = navigator.userAgent,

        iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),

        ipad = ~ua.indexOf('iPad'),

        ios = iphone || ipad,

        // Detect if this is running as a fullscreen app from the homescreen

        fullscreen = window.navigator.standalone,

        android = ~ua.indexOf('Android'),

        lastWidth = 0;

    if (android) {

    // Android's browser adds the scroll position to the innerHeight, just to

    // make this really <img src="smileys/smiley35.gif" border="0" align="middle" /> difficult. Thus, once we are scrolled, the

    // page height value needs to be corrected in case the page is loaded

    // when already scrolled down. The pageYOffset is of no use, since it always

    // returns 0 while the address bar is displayed.

    window.onscroll = function() {

        page.style.height = window.innerHeight + 'px'

    }

    }

    var setupScroll = window.onload = function() {

    // Start out by adding the height of the location bar to the width, so that

    // we can scroll past it

    if (ios) {

        // iOS reliably returns the innerWindow size for documentElement.clientHeight

        // but window.innerHeight is sometimes the wrong value after rotating

        // the orientation

        var height = document.documentElement.clientHeight;

        // Only add extra padding to the height on iphone / ipod, since the ipad

        // browser doesn't scroll off the location bar.

        if (iphone && !fullscreen) height += 60;

        page.style.height = height + 'px';

    } else if (android) {

        // The stock Android browser has a location bar height of 56 pixels, but

        // this very likely could be broken in other Android browsers.

        page.style.height = (window.innerHeight + 56) + 'px'

    }

    // Scroll after a timeout, since iOS will scroll to the top of the page

    // after it fires the onload event

    setTimeout(scrollTo, 0, 0, 1);

    };

    (window.onresize = function() {

    var pageWidth = page.offsetWidth;

    // Android doesn't support orientation change, so check for when the width

    // changes to figure out when the orientation changes

    if (lastWidth == pageWidth) return;

    lastWidth = pageWidth;

    setupScroll();

    })();

    </script>

  • Has anyone actually been able to hide address bar?I have tried countless things to be able to do so.Just nothing seems to be working .Please give a solution for this.

  • Did you get a solution for hide address bar?Please help me with that.I have tried countless different things.Thank you.

  • Just.Though.Id.Add

    I've had some luck hiding the address bar. On start of layout - (Browser) Request Full Screen.

    You'll have to play around with different modes like scale inner or letterbox scale to see which one works best for you & also some tweaks may have to be made to get everything displaying properly within the screen.

    Make sure youre games window size is a true 16:9 resolution. I use 1280 x 720

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)