iphone - 文本在 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 这样的字体大小它会工作正常。并确保添加元 View 端口

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

  .example{
  font-size:1.2em;
   }