How to hide the bottom bar of safari on iOS7.01 by CSS

Recently, a client asked me a question “Why the bottom bar of  safari is always cover on my drop menu  on my iphone4 so that I can’t select the last menu item?”. After I checked his website, I found the bottom bar is displayed by default on iOS7 Safari, but when you scroll down the page, then the  bar will be hidden. I feel a little bit uncomfortable,  so I thought about to hide it by default.

Finally I found a very easy solution on stackoverflow, just put the following codes into head tag in your header file.

<head>
...
<meta name="viewport" content="width=device-width, minimal-ui">
...
</head>

That’s it. 🙂

Leave a Reply