我有一个非常简单的问题,但我花了很多时间试图解决它!
我有一个 <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">
最佳答案
使用@media only screen
或@media screen
让它工作
关于ios - CSS - iPhone 6 上未应用高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28827655/