Hairy Sun

Matt's Blog on Some Geeky Topics

Removing Mobile Chrome in Octopress

On mobile devices, the address bar takes up too much space. Here is how I made it disappear on this blog. This blog is an Octopress blog so I put it in octopress/source/_includes/custom/head.html, but the code html and javascript should work on any webpage.

Remove mobile chrome from pages.
1
2
3
4
5
6
7
8
9
10
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script>
window.addEventListener("load",function() {
  setTimeout(function(){
      // Hide the address bar!
      window.scrollTo(0, 1);
  }, 0);
});
</script>

Just throw that in your HTML head and you should be good. Props to SO and David Walsh.

Comments