iphone - iOS スタイルの CSS メニューバーの作成

Question

そこで、iOS 7 のスタイルを反映するモバイル サイト用のナビゲーション バーを作成しようとしています。Nexus では問題なく見えますが、iPhone では、iPhone の画面が小さいため、要素が重なり合っています。 (320px)。

現在、ナビゲーション バーは次のようになっています。

CSS:

#bar-container {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: auto;
    margin-bottom: 3em;
    background-color: #fff;
    border-bottom: 1px solid #a1a1a1;
}
#nav {
    width: 50%;
    height: auto;
    margin: 1em 25% 1em 25%;
    padding: 0;
    list-style: none;
    border-bottom: 2px solid #0775FF; 
    border-top: 2px solid #0775FF;
    border-right: 2px solid #0775FF;
    border-left: 2px solid #0775FF;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius:6px;
    text-align: center;
    font-family: Body;
    color: #0775FF;
    vertical-align: middle;
    background-color: #fff;
}
#nav li {
    display: inline-block;
    vertical-align: middle;
    width:160px;
    color: #0775FF;
    font-family: Body;
}
#nav li a {
    display: inline-block;
    width:160px;
    padding: 8px 0px 1px 0px;
    text-decoration: none;
    font-weight: bold;
    color: #0775FF;
    vertical-align: middle;
    text-align: center;
}
#nav li a:hover {
    color: #fff;
    display: inline-block;
    background-color: #0775FF;
}
#nav li.pressed a {
    background-color: #0775FF;
    display: inline-block;
    color: #fff;
}

HTML:

<div id="bar-container">
  <ul id="nav">
    <li class="pressed"><a href="#">call</a></li>
    <li><a href="#">missed</a></li>
  </ul>
</div>

これは私が気に入ってほしいものです: http://s1.ibtimes.com/sites/www.ibtimes.com/files/styles/v2_article_large/public/2013/06/18/ios-7-phone-recents.PNG

すべての画面解像度で機能させるにはどうすればよいですか?