Menu icon Foundation
How to hide the URL address bar on IOS/Android

I want to hide the URL address bar in the HTML 5 web page on IOS/Android phone. I'm currently using Zurb foundation 4.x.

I don't want to show the URL on android and IOS phone browsers. Please suggest me .

Since we tried using w3c full screen API. But Full screen API not seems to be working on html5.
Please refer here - http://mobilehtml5.org/

Please advise me the elegant way of requesting the full screen in IOS/Android phone. My intention is to hide the address bar in the HTML 5 web page

iosandroidsite url

I want to hide the URL address bar in the HTML 5 web page on IOS/Android phone. I'm currently using Zurb foundation 4.x.

I don't want to show the URL on android and IOS phone browsers. Please suggest me .

Since we tried using w3c full screen API. But Full screen API not seems to be working on html5.
Please refer here - http://mobilehtml5.org/

Please advise me the elegant way of requesting the full screen in IOS/Android phone. My intention is to hide the address bar in the HTML 5 web page

Karl Ward over 4 years ago

I'm afraid that is not currently possible. IOS simply does not support fullscreen http://caniuse.com/#feat=fullscreen. There used to be a work-around called the "scroll-hack", where you could scroll the window to 1px by ways of JS to hide the address bar, but as of iOS 7, this technique does no longer work. IOS address bar will show and display as it desires unfortunately.

Gábor Fábián about 4 years ago

The url bar is not hidden, because you have to scroll the body so it triggers the url bar to hide. With the Foundation off-canvas the problem is that the body has the screen's height (height: 100%), so you can't scroll it up. When you're scrolling, you are only doing it in the inner-wrap container, which has overflow: scroll, but scrolling in it doesn't trigger the url bar to hide, because your document's hight is always the window's height. I hope it's easy to understand.

I've found a way fixing this, but you either have to modify your off canvas handler js file, or you just accept that the off canvas menu will not animate / slide in (will not have a changed parent class, because Step 2).

So, basicly:

Step 1:
Remove the height: 100% from the html & body, maybe the container div's as well (off-canvas-wrap, inner-wrap) but might not be necessary.

Step 2:
Move the sidenav and the aside off-canvas-menu out of the off-canvas-wrap, give them position fixed and remove their initial translate3d.

Step 3:
Give your off-canvas-menu some lower z-index than the off-canvas-wrap has, and maybe give some background color to the off-canvas-wrap so your menu won't be visible behind it.

I messed up this commit a bit, not only the relevant changes made into it, but you'll get the idea from here: https://github.com/FabianGabor/fabiangabor-html/commit/6a6d6b57d495a008e18b88374162bd59ddb35046

jinch almost 2 years ago

I know this is an old post but also looking for a solution : / using Foundation 6, Off-canvas with fixed nav.

I think Fábián's mod may be the way to go but this did not work in my case. I also tried the the full screen hack here (https://developers.google.com/web/fundamentals/native-hardware/fullscreen/) but this did not fix the problem and  instead created other rendering issues.

cnet.com (the mobile version of the site) has seamed to resolve this but not sure how?

 

andy almost 2 years ago

The reason is since it's an embedded iframe and there is no extra space below the buttons.Advanced Archive Password Recovery Letting the dropdown to align to the bottom isn't really an option for me. The content in the dropdown is a menu list so strictly speaking the archive flasher free download use case is not tooltip. Is there a way I could work around this? How Foundation 5 determines whether current container is a small screen, does it look at the window or the containing layer?

Thank you.

alia khan about 1 year ago

Thanks for sharing how to hide url in the apple phone & android phone.

 

If you wanna install & download plague inc full version free android just click here and download it.

vondes vondes 2 months ago

Can u say something about a https://mrecorder.com/ mobile recorder on Android? How does it work with other applications?