Question

http://darrenbachan.com/playground/diamond-hand-car-wash/index.html

我在台式机Chrome，Android，三星平板电脑，iPhone 6和iPad上测试了我的网站。我的横幅广告并不适用于iOS，主要是iPad。高度变得很大，与设备的高度不匹配。

我不确定代码在哪里不正确，但在所有设备上我都希望横幅是窗口的高度，我希望我能正确使用该术语。

我从本文Responsive Height/Width Video Header

中抓取的横幅代码

以下是我的代码：

#banner.container-fluid {
    padding: 0;
    position: relative;
}
#banner.overlay:after {
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: block;
    z-index:0;
    background-color: rgba(0,0,0,0.8);
}
header {
    position: relative;
    overflow: hidden;
    width:100vw;
    height:100vh;
    max-height:100vh;
    text-align:center;
}
.banner-text {
    position: relative;
    top: 55%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 1;
    margin: 0 auto;
    max-width: 550px;
    /*left: 50%;*/
    /*transform: translate(-50%, -50%);*/
}
.banner-text h1,
.banner-text h4 {
    color: #fff;
}
.banner-text h1 {
    padding-bottom: 20px;
}
.banner-text h4 {
    padding-bottom: 40px;
}
.banner-text .logo-white {
    width: 75px;
    height: 65px;
    display: block;
    margin: 0 auto 20px auto;
}
.video-holder {
    position:absolute;
    height:100%;
    width:200%;
    left:-50%;
}
video {
    position:absolute;
    top: -99999px;
    bottom: -99999px;
    left: -99999px;
    right: -99999px;
    margin: auto;
    min-height:100%;
    min-width:50%;
}

Answer 1

显然，webkit团队是故意添加的。已创建issue，但此后已被关闭为WONT FIX。

解决方案（不理想）

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  header { height: 62vh; }
}

在我的测试中，我不需要为横向添加样式，但我正在测试iPad模拟。实际 iPad上的结果可能会有所不同。

横幅高度不是iPad上的设备高度

1 个答案: