safari hide address bar css

• Main Content

• JavaScript Promises
• ES6 Features

Hide the Address Bar within Mobile Web Applications

With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages:

• A rendering engine with capable of flawless CSS animations
• A rendering engine that's fast... very fast
• A rendering engine that's modern and forward-thinking

These advantages allow us to create web apps within that browser that look as good as native applications.  If your goal is to create web apps that look like native applications, the details count.  One of those details:  hiding the address bar.  Native applications don't have address bars so why should your app? As an added bonus, hiding the address bar will provide you an extra 60 pixels of space!

You may think hiding the address bar within the mobile browser is difficult but you'd be surprised how simple it is.  All you need is a touch of JavaScript!

The JavaScript

The window.scrollTo method is the key to hiding the address bar.  The wrapping setTimeout function is required by the iPhone to properly hide the address bar -- not using setTimeout will cause problems.

Bonus: META Tag for Bookmarked Sites

If a user has added your web application to their springboard, the following meta tag can remove the top bar from the browser:

And that's all!  The address bar is hidden until the user swipes down near the top bar of the application.  With the address bar hidden, your web app can look just like a native app!

Recent Features

Being a Dev Dad

I get asked loads of questions every day but I'm always surprised that they're rarely questions about code or even tech -- many of the questions I get are more about non-dev stuff like what my office is like , what software I use, and oftentimes...

JavaScript Promise API

While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

Incredible Demos

Translate Content with the Google Translate API and JavaScript

Note:  For this tutorial, I'm using version1 of the Google Translate API.  A newer REST-based version is available. In an ideal world, all websites would have a feature that allowed the user to translate a website into their native language (or even more ideally, translation would be...

Image Data URIs with PHP

If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

Thanks!, didn’t know about that meta and works just great :)

This is a brilliant little script, makes the website look much better, just tried it on a clients site I am doing for them on our testing server and looks brilliant. http://vivimed.planet-group.co.uk

Couldn’t get the meta tag version to work….

Would I be right in thinking this will also work on iPad aswell???

Save the web page as a web clip then open it from the springboard.

Yes, it should work well.

That’s just plain cool. Javascript FTW. Thanks for the tip!

Hi there!! I am trying the code in the mobile version of my company. I can´t make it work. Do you know what the problem is? Thank you!

Doesn’t seem to be working. have tried all the above steps… Did the new iOS update change things?

I have the the script version working a treat and works well on a clients website: http://www.vivimedlabs.com I inserted it after my “domready” request on its own line like this..

This way I stopped it from generating errors.

P.s I did wrap my code in “ ” tags but seems to of come up a bit strange.?

This maybe a bit better to make sure its the Safari Browser you scrolling on, on either platform

This works for me but if anyone can better the IF statement please fire away

This maybe a bit better to make sure its the Safari Browser you are scrolling on, on either Mobile Platfrom

**Mod please delete the 3 above previous post**

I just confirmed that it is indeed working in latest iOS. I think the problem people are having is probably that their page isn’t tall enough. If your page is too short to scroll up, the scroll script won’t work.

This breaks for me on orientation change – at least in Android’s Browser.

Could you call the function again on orientation change?

This seems to work great on the iPhone but not on the iPad. Anyone get this to work on an iPad?

I’d like to find out how this also works on the iPad. Any suggestions or answers? Thx.

I never really resolved my issue with this, it didn’t end up being a huge deal for what I needed it for so I just consolidated to allow the extra space at the top of my layout.

Nice work, man. You should probably mention that the page has to be long enough to fill the screen (sans-address-bar), otherwise it will not scroll the address bar out of the way. I think that should answer a lot of people’s problems on here…

I have one question, though… once you’ve loaded the page and hidden the address bar, the user can still open it up again. I’ve been trying all sorts of things trying to figure out a way of re-hiding it when the user taps back onto the page, but can’t find a method that works properly… Any ideas?

Exactly, your screen needs to be long enough for the address-bar to disappear. But now I want to have a height of 100% and still make the address-bar disappear, any tried this? and succeeded? height 100% just takes the available height of the page minus the space for the address-bar…

@Thomas Giles

This is just a quick tip, but have you tried the onFocus event?

Very cool script… Really like that functionality…BUT,

I have installed th same on my site and have it working great, but notice just as in yours mike, that when you view and launch the web app from home screen it hides browser, but the first link you hit on page it opens the new page in a browser, like a hyperlink off an app.

I am looking to have the entire site and any of the htm pages in the same directory and any subdirectories open in the web app mode ie. without the browser.

Suggestions? Does anyone else have this working?

Forgive me for being new to this. I’m would like to get this to work on my mobile site, but the attempts I have made have failed. I’m thinking I’m placing the code in the wrong js file. Is there a specific one I should place it in?

If it’s of any help, the website I’m creating is a wordpress site.

@RANDY CALCATERRA This is what I’ve been using to keep my links from opening anew in mobile Safari.

This targets all of my a tags and returns false when clicked, so that they don’t open the way they want to. So instead of opening the link in the browser, I reset the location of the window to the href that I pulled off the clicked a tag.

I use delegate, because I sometimes create links dynamically, and .click() only binds the click event to elements that are in the document at the time the code runs.

This was a helpful article if you’re interested in the differences between .bind() , .live() , .delegate() , and .on() : http://www.elijahmanor.com/2012/02/differences-between-jquery-bind-vs-live.html

Hope that’s helpful.

I am so sorry to have posted so much. I was trying to figure out how to get it formatted correctly. That last post is the closest to what I wanted…

I tried this code on my mobile games pages, which are longer than 960pixels, but it never works. I guess there are some other requirements for this method to work.

Really?.. are we really that lazy?.. we really can’t scroll down a few pixels by hand? :|… it’s a website.. it should look like one… i want to see the address up there.. want to know where I am.. I love apple’s way of being (just works.. ) but most of you’ve just turned it into a couch-potato-do-everything-for-me thing… thanks for the comment nonetheless.. any bit of info is always appreciated… (but still)

Perfect, thank you very much! Works great on my iPhone layout :)

It seems it only works, when you add a ‘#’ sign in the very end of your urladdress

Hero! Thanks!

Seems like this is obsolete code now as in I get full screen by default when loading jquery mobile.

What if you’re not using jQuery mobile?

Well, this is not enough. Hiding the address bar is one thing, but one of the biggest remaining problem is for one-div views (imagine a map-based app). You have to define the exact size of the height of your browser, without address bar. This is not as easy as the one listed here. Would be interested to have your point of you on this. Stackoverflow has a discussion on this : http://stackoverflow.com/questions/4068559/removing-address-bar-from-browser-to-view-on-android

But none of the listed solutions work correctly on all browsers (i tested chrome, iphone, ipad).

This now works in the latest version of Chrome for iOS too!

Thank You David, works perfectly

Great script but I have an issue. For example, I have a banner that a user clicks on and is redirected to my page that has the above script. When the page first loads the header bar doesn’t hide, but if i refresh the page the address bar does hide. im testing on a iphone 4 ios6. any help would be much appreciated.

Doesn’t work if app is as high as the browser window :-/

Right, the page use to have to be 1500 pixels tall, now it looks like it has to be 1800 pixels tall. (I can’t get any of this to work on iPads though)

It is doesn’t work for me. Address bar remains the same …

Works great for me thank you for enlighting

It doesn’t work on ipad!

Why I am getting error like: Browser is not defined

I am adding script like:

Please help me asap.

Why doesn’t this work?

Feb 13, 2016 —- Hi. I have latest iOS. this technique doesn’t work. You can scrollTo 100 and it won’t remove the address bar without scrolling manually. I have not found a solution.

This works, but only for the first page. If you bookmark the homepage to front screen then open it, it will remove the address bar on the first page but once you click to another page inside the site it opens it back into safari with the address bar.

Is there anyway to keep the entire site’s pages without the address bar?

Not working anymore?

This no longer works on an iPhone running latest version of IOS 10

doesn’t fire on sharepoint, if you have another solution, please share.

Thanks in advance

The solutions offered don’t work (not in Chrome, not in Firefox; not in iOS, not in Android.) Now obsolete and a total waste of time.

May 2020, Hi, the solution proposed here seems to be obsolete for a couple of years now. Has anyone found a working solution? Thanks

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Amit Merchant Verified ($10/year for the domain)

A blog on PHP, JavaScript, and more

Designing websites keeping floating tab bar of Safari 15 (on iOS) in mind

September 2, 2021 · Safari

The newest version of Safari, i.e Safari 15 , on iOS is great. It comes with an all-new layout and a new way of navigating websites on it.

Essentially, the address bar is now moved to the bottom of the screen and it now adjusts itself as you scroll the website. As you swipe on a webpage, the tab bar minimizes into the bottom of the app. Swipe back up or tap at the bottom to make the tab bar reappear.

The problem

The safe-area-inset-* properties.

So, for instance, if the website would look something like following when you’re not scrolling along.

And as soon as you start scrolling, the tab bar/address bar will reappear like so.

This is to make the entire experience of visiting a website more seamless and appealing.

This improvement/enhancement comes with a shortcoming. The “floating” nature of the tab bar hurts in some scenarios.

Take the following for example.

As you can see, in this example, the tab bar is actually obstructing the footer of the website and it’s really hard to tap on those buttons now.

How to get around this problem?

Well, it turns out, the CSS has its answer in form of safe-area-inset-* properties.

By using the safe-area-inset-* properties in conjunction with the env() , it’s possible to mitigate this issue.

There are four kinds of safe-area-inset-* properties

• safe-area-inset-top
• safe-area-inset-right
• safe-area-inset-bottom
• safe-area-inset-left

These properties define a rectangle by its top, right, bottom, and left insets from the edge of the viewport, which is safe to put content into without risking it being cut off by the shape of a non‑rectangular display.

In the case of Safari 15, the safe area is the rectangle area that resides above the tab bar (when scrolling) as shown below.

As you can tell, the green area shown in both of the cases defines the safe area and so, we can adjust the design of our website accordingly.

So, if we want to do that, we can use the env() and safe-area-inset-bottom to give the bottom padding that it needs like so.

When done, the footer will have that extra padding, thanks to safe-area-inset-bottom . And now, those two buttons won’t be obstructed by the tab bar anymore.

In the usual scenario, let’s say in the Chrome browser, the safe-area-inset-bottom will always be 0 . So, the footer would look normal. The safe-area-inset-bottom will only kick in when the website is loaded on Safari 15 on iOS.

And this is how you can make your website compatible with Safari 15 without sacrificing the experience!

» Share: Twitter , Facebook , Hacker News

Like this article? Consider leaving a

👋 Hi there! I'm Amit . I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

More on similar topics

Dock installable web apps in Safari macOS Sonoma

Get your website ready for new tab bar theming of Safari 15

Awesome Sponsors

Download my eBook

Recommendation(s)

Get the latest articles delivered right to your inbox!

No spam guaranteed.

Follow me everywhere

More in "Safari"

Recently published.

Property hooks are coming in PHP 8.4 NEW

A free alternative to GitHub Copilot

Talk to websites and PDFs with this free Chrome Extension

RunJS — A JavaScript Playground on your desktop

The fluent data helper in Laravel

Top Categories

hide mobile safari address bar

Want to hide the address bar in mobile safari? Use that

Written by Matthias

Related protips, change the bootstrap navbar breakpoint, html5 mobile device camera access, one line function to detect mobile devices with javascript, have a fresh tip share with coderwall community.

• a. Send us an email
• b. Anonymous form
• Buyer's Guide
• Upcoming Products
• Tips / Contact Us
• Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

How to Hide the Toolbar in Safari for iOS

The Website View menu includes one-tap settings that let you change text size options , request the desktop version of a website , and more. Here we're going to check out the new Hide Toolbar option.

In earlier versions of iOS, Safari hides the top and bottom toolbars when scrolling down a web page, and to view them again you have to tap the URL or swipe down on the page.

In iOS 13 though, you can get Safari to hide the toolbar completely when navigating a website, which makes for a less disruptive experience.

Simply select Hide Toolbar from the dropdown menu, and the toolbar will shrink to show just the URL. This more slimline arrangement will remain while you navigate the website, but you can re-instate the toolbar anytime by tapping the mini URL bar at the top of the screen.

Get weekly top MacRumors stories in your inbox.

Popular Stories

iOS 18 Rumored to Add New Features to These 16 Apps on Your iPhone

Check Out This Apple Watch iPad Demo Unit From 2014

Will the New iPad Pro Really Have the M4 Chip?

iOS 17.5 Includes 'Repair State' Option That Doesn't Require Turning Off Find My for Service

Report Examines GM's Controversial Move to Abandon Apple CarPlay

Amazon's New Apple Sale Has Best-Ever Prices on AirPods Pro, Studio Display, Apple Pencil, and More

Apple Announces 'Let Loose' Event on May 7 Amid Rumors of New iPads

Next article.

Our comprehensive guide highlighting every major new addition in iOS 17, plus how-tos that walk you through using the new features.

App Store changes for the EU, new emoji, Podcasts transcripts, and more.

Get the most out your iPhone 15 with our complete guide to all the new features.

A deep dive into new features in macOS Sonoma, big and small.

Revamped models with OLED displays, M3 or M4 chip, and redesigned Magic Keyboard accessory.

Updated 10.9-inch model and new 12.9-inch model, M2 chip expected.

Apple's annual Worldwide Developers Conference will kick off with a keynote on June 10.

Expected to see new AI-focused features and more. Preview coming at WWDC in June with public release in September.

Other Stories

5 hours ago by Tim Hardwick

3 days ago by Tim Hardwick

1 week ago by Joe Rossignol

1 week ago by MacRumors Staff

How to Hide the Address Bar in Mobile Safari for iPhone

While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes about 60 pixels of real estate by default when a page is loaded in MobileSafari. With either 320 or 480 pixels available to the viewport, 44 of which are reserved for the bottom toolbar, it’s necessary to maxamize every available pixel. Below, we will show you two examples you can use to hide the default address bar when the page loads, allowing you to reclaim this valuable space in your iPhone presentations.

There are several ways to accomplish this, the simplest way we have found is as follows:

NOTE: This is deprecated in iOS 5. Check out   http://snippetspace.com/iwebkit/demo/ for iOS 5 support.

We define an on load event handler in the body tag and use a simple function to hide the scrollbar whenever the page loads. Actually, it is shifted above the viewport just out of sight. In this way, we can load content in that area while still allowing your visitors access to the controls, should they need them.

Another method is as follows:

This achieves the same effect by creating an event listener and writing a simple function to handle the scrolling of the address bar.

By suppressing the default address bar we are able to reclaim this space for our presentations. I hope you have found this tutorial useful, let me know what you think.

Here’s an example . View source and copy/paste the body tag into your HTML document to apply it to your page.

Visit sunny St. George, Utah, USA

Send a Message

We would love to hear from you.

Does Safari 15 finally fix viewport height?

Written by Luke Channings on June 11, 2021

The design for Safari 15 has been very controvercial, and has changed significantly since the beta that this article was based on Sadly, one of the casualties of the evolving design was the main thrust of this article: env(safe-area-inset-bottom) is no longer dynamically the height of the address bar in the final release.

TL;DR : No , but if you subtract env(safe-area-inset-bottom) from 100vh you'll get what you want .

Safari 15's UI is a radical departure from the previous version — and from web browsers in general — but does it fix the viewport height problem?

What is the viewport height problem again?

Mobile Safari has had problems related to 100vh not behaving like web developers expect 1 2 pretty much since the beginning. The main crux of the issue is that Mobile Safari's UI Chrome shrinks when you scroll, and expands again when you activate it. That means 100vh ("100% the height of the viewport") can't be a static number.

Let's start by understanding the definition of the vh unit 3 :

vh is defined as Equal to 1% of the height of the initial containing block . — Anthony Frehner

And here's the best explanation of the 100vh issues in Mobile Safari that I've seen so far,

The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with. — David Chanin , Avoid 100vh On Mobile Web

Let's put this new Safari to the test

I have a simple HTML page based on the example given in David's article. It has a header at the top and a button at the bottom, all wrapped in a 100vh container.

Safari's new floating address bar is displayed above our test button, which is more-or-less exactly the same behaviour as iOS 14.

So - Safari 15 does not change the behavour of 100vh 😢.

So what's the solution then?

It makes sense to me that the WebKit team wouldn't change the behaviour of the viewport unit, it's already well defined.

Do you remember when Apple introduced env() and safe-area-inset so that web developers could avoid their content being shown behind the notch 4 ?

Well in Safari 14, safe-area-inset-bottom is 0px whether the UI chrome is active or inactive, which is something that has annoyed me for a while.

safe-area-inset-bottom is 0px when the UI chrome is inactive in Safari 15 on iOS, and then the height of the collapsed chrome minus the height of the expanded chrome when the bar is expanded.

That means that to get a button to float at the bottom of the page, always above the UI Chrome, all you have to do is use calc(100vh - env(safe-area-inset-bottom)) .

Wrapping up

So not only does safe-area-inset-bottom work in Safari 15, it's animated !

I've been hoping that something to remedy the viewport height bug was coming since Jen Simmons (who joined the Safari / WebKit team in June 2020) was asking for feedback regarding viewport height issues.

Hey everyone who’s been frustrated that VH units in CSS don’t do what you need… can you describe your usecase? What layout are you creating? With which layout mechanism? What do you need? Screenshots & sample code appreciated. — Jen Simmons ( @jensimmons ) May 15, 2021

Have a feeling I’m going to be talking about Environment Variables a lot this week. They are really cool & supported! https://developer.mozilla.org/en-US/docs/Web/CSS/env() https://caniuse.com/css-env-function padding-bottom: calc(1rem + env(safe-area-inset-bottom)); -or- height: calc(100vh - env(safe-area-inset-bottom)); — Jen Simmons ( @jensimmons ) June 7, 2021

• https://bugs.webkit.org/show_bug.cgi?id=141832 ↩
• https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ↩
• https://github.com/w3c/csswg-drafts/issues/4329 ↩
• https://webkit.org/blog/7929/designing-websites-for-iphone-x/ ↩