CSS - iPhone 6 上未应用高度

Question

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

我有一个高度为 100 像素的 <header>。

当它满足断点（针对手机）时，我希望高度更改为 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 ; }
    }
}

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

我可以通过嵌入式视图访问上面的链接来复制问题：http://embed.plnkr.co/blufimw09mX52Kx5JEVW/preview

iPhone 4 和 6 上的 header 高度明显不同

任何帮助将不胜感激！

---

更新：

有点谷歌提示这可能是我的视口的问题，这是我的 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