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

这是一个挑战者：http://plnkr.co/edit/blufimw09mX52Kx5JEVW?p=preview

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

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

任何帮助将不胜感激！

更新

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

CSS - 未在iPhone 6上应用高度

1 个答案: