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%;
}
最佳答案
显然,是 webkit 团队故意添加的内容。一个issue已创建,但由于 WONT FIX
而被关闭。
解决方案(不理想)
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
header { height: 62vh; }
}
在我的测试中,我不需要为横向添加样式,但我是在 iPad 模拟上进行测试。 实际 iPad 上的结果可能会有所不同。
关于html - 横幅高度不是仅在 iPad 上的设备高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36830240/