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

【问题标题】：Responsive div is taller than 100% when I flip my smartphone to landscape. How to fix it?当我将智能手机翻转到横向时，响应式 div 高于 100%。如何解决？
【发布时间】：2016-08-08 22:30:20
【问题描述】：

这是我的 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 框架。

【问题讨论】：

你试过用100vh代替100%吗？
当页面以每种格式重新加载时，是否也会发生这种情况？ @athanasios-canko 网站仅呈现一次，并且如果方向发生变化，例如iOS 只翻转渲染的网站，而不重新渲染页面。请参阅此问题以获取可能的解决方案：stackoverflow.com/questions/7919172/…

标签： html ios css responsive-design landscape

【解决方案1】：

您需要检测方向的变化，并将您的 div 高度重置为新视口的 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);

【讨论】：