I have a web page that is intended to be loaded on a person's iPhone. When the page is loaded, I want to hide the status and address bar that is at the top. I have seen other sites do this. In an attempt to accomplish this, I have placed the following code in the section of my web page:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<script type="text/javascript">
function page_Load() {
setTimeout(function() { window.scrollTo(0, 1); }, 100);
}
</script>
The "page_Load" function is triggered through the onload event of the page's body element. Oddly, when the page loads, the status/title bar is hidden, however, not the address bar.
How do I hide both the status/title bar and the address bar when a web page loads?
Thank you!
To get started enter “about:flags” into the Address Bar and hit Enter. Scroll down until you see the listing for Compact Navigation. Enable it and let the browser restart to gain access to the feature. Once the browser has restarted right click on one of the tabs and select Hide the toolbar from the Context Menu.
Enter full screen mode, right-click anywhere around the address bar then click "Hide Toolbar" in the menu that appears. Although next time you enter full screen mode the toolbar comes back.
For those of you using jQuery here's an even simpler version:
$('body').scrollTop(1);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With