文字在iPhone上没有正确调整大小

Question

我正在尝试与我的公司网站排序一些跨浏览器兼容性问题，但我已经碰到了一堵砖墙。

在iPhone（4个，4个，5个，5个和5个）上，标题中的导航显示不正确，并且没有随页面的其余部分调整大小。

在其他移动平台上，（我认为）最常用的浏览器（Firefox，Chrome，Dolphin，Opera），文本会根据网站的其他部分进行重新调整，并且正确匹配。

要解决此问题，我已尝试按font-size和px设置em属性，但结果都是相同的。

这是iPhone / Safari的已知问题吗？如果是这样，有没有人对我如何解决它有任何想法？

以下是该页面部分的CSS -

#header-navigation{
    bottom: -4px;
    font-weight: bold;
    position: absolute;
    right: 1px;
}
#header-navigation ul.menu{
    margin: 0;
    padding: 0;
}
#header-navigation li{
    display: inline;
    list-style-type: none;
    padding: 0 14px;
    vertical-align: bottom;
}
#header-navigation li.last{
    padding-right: 0;
}
#header-navigation li a{
    color: #6A737B;
    font-size: 14px;
}
#header-navigation li a:hover,
#header-navigation li.current-menu-item a,
#header-navigation li.current-page-ancestor a{
    border-bottom: 1px solid #C41E3A;
    text-decoration: none;
}

以下是该页面在iPhone5上的显示方式（以下是它应该是什么样的 - http://www.dynedrewett.com）。

Answer 1

使用像 em 这样的字体大小，它可以正常工作。并确保添加元视图端口

   <meta name="viewport" content="width=device-width;minimum-scale=0.5,
   maximum-scale=1.0; user-scalable=1;" />

  .example{
  font-size:1.2em;
   }