iPhone 上的文本大小不正确

Question

我正在尝试解决与我公司网站的一些跨浏览器兼容性问题，但遇到了障碍。

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

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

为了解决这个问题，我尝试通过px 和em 设置font-size 属性，但结果都是一样的。

这是 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;
   }