横幅高度而不是仅在 iPad 上的设备高度

Posted 2023-03-12

【中文标题】横幅高度而不是仅在 iPad 上的设备高度

【英文标题】：Banner height not the device height only on iPad

【发布时间】：2016-04-24 23:52:36

【问题描述】：

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

【参考方案1】：

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

解决方案（不理想）

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

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

【讨论】：

我得试试这个。谢谢。

@DarrenBachan 我拉下了您的网站，并使用答案中的上述代码在本地工作。你这边什么都没有改变？

我在网络上使用 chrome 的设备模式模拟 iPad 时看到的内容与原始代码一起工作。我唯一能弄清楚的是，标题上的 height:100vh 在 iPad 上搞砸了。将其设置为 62vh 仍然会使它变得庞大，只是少了一点。编辑：如果我将它调整到 9-12vh 之间的某个位置，它看起来会更好，或者如果我将它设置为 930px。感觉就像是一个错误的修复。

仍在测试中。没有放弃。

我希望在我的物理 iPad Mini 上测试您的网站会重现该问题，但那里的 UI 看起来不错（没有巨大的标题）。可悲的是，我无法使用更大的 iPad。我对这个感觉很糟糕，并认为我可以解决这个问题。对不起，@DarrenBachan :(