ios - CSS - iPhone 6 上未应用高度

Question

我有一个非常简单的问题，但我花了很多时间试图解决它!

我有一个 <header>高度为 100px。

当满足断点时(针对手机)，我希望高度更改为 70px。

这很容易通过:

header {
  height: 100px;
}

@media (max-width: 768px) {
  header {
    height: 70px;
  }
}

在桌面浏览器 - FF、IE、Chrome 等上测试时，这工作正常(调整浏览器大小时)。这在运行 iOS 7.1 的 iPhone 4 上也能正常工作。

然而，当在 iPhone 5、5s 和 6 上进行测试时。70px 的更改显然没有应用，留下 100px <header>

我正在使用 SASS 和 MIXIN 创建我的断点:

@mixin breakpoint($point) {
    @if $point == largedisplay {
        @media (max-width: 1200px) { @content ; }
    }
    @else if $point == default {
        @media (max-width: 980px) { @content ; }
    }
    @else if $point == tablet {
        @media (max-width: 768px) { @content ; }
    }
    @else if $point == mobile {
        @media (max-width: 480px)  { @content ; }
    }
    @else if $point == custom {
        @media (max-width: 1030px)  { @content ; }
    }
}

这是我做的一个 plunker:http://plnkr.co/edit/blufimw09mX52Kx5JEVW?p=preview

我可以通过嵌入式 View 访问上面的链接来重现该问题:http://embed.plnkr.co/blufimw09mX52Kx5JEVW/preview

而且 iPhone 4 和 6 上的标题高度明显不同

如有任何帮助，我们将不胜感激!

---

更新:

Google 搜索表明这可能是我的视口(viewport)有问题，这是我的 HTML 中的内容:

<meta charset="utf-8">
<meta content="width=device-width" name="viewport">

Answer 1

使用@media only screen 或@media screen 让它工作

或查看此链接:iPhone 6 and 6 Plus Media Queries