html - 当我将智能手机翻转到横向时，响应 div 高于 100%。如何解决？

Question

这是我的 div(父/子)HTML 代码:

<div id="header">
    <div id="elements">
        <img style="margin: auto" class="img-responsive" src="https://s20.postimg.org/59ntjyiot/Arvan_Tourism_Logo_Web.png" alt="ArvanTourismLogo.png">
        <p style="font-size: 2.5em; color: white">Arvan Tourism</p>
        <p style="font-size: 1.5em; color: white">Explore our wonderful Albania.</p>
        <button id="WhatWeOfferButton" class="btn btn-success" style="margin-top: 5px"> What do we offer? </button>
    </div>
</div>

这是我的 CSS 代码:

#header {
    box-sizing: border-box;
    background-image: url("https://s20.postimg.org/o8ddqmo7x/Blue_Eye.jpg");
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    display: table;
}

#elements {
    display: table-cell; 
    text-align: center;
    vertical-align: middle;
}

以下是它在移动设备上的外观截图。

Portrait screenshot

Landscape screenshot

我应该执行哪些调整才能防止它在横向模式下变高？我正在使用 Bootstrap 框架。

Answer 1

您需要检测方向的变化，并将您的 div 高度重置为新视口(viewport)的 100%。方法如下:

简单修复:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    $('.your_div').height('100%');
}, false);

某些浏览器可能不支持该事件，因此更安全的方法是首先检查是否支持该事件，如果不支持，则使用“调整大小”事件。您可以按照此 answer 中的描述实现此目的:

更安全的修复:

// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
   $('.your_div').height('100%');
}, false);