Responsive Div ist größer als 100%, wenn ich mein Smartphone in die Landschaft drehe. Wie man es repariert?

Question

Hier ist mein HTML-Code für die divs (Eltern/Kind):

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

Hier ist meine CSS-Code:

#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; 
} 

Hier sind Screenshots, wie es auf Handy aussieht.

Portrait screenshot

Landscape screenshot

Welche Verbesserungen sollte ich so aus, dass ich es von zu sein größer auf Landschaftsmodus verhindern kann? Ich benutze Bootstrap-Framework.

Answer 1

Sie müssen die Änderung der Ausrichtung erkennen und Ihre div-Höhe auf 100% des neuen Ansichtsfensters zurücksetzen. Hier ist, wie Sie es tun können:

Einfache Fix:

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

Einige Browser nicht dieses Ereignis unterstützen kann, so dass ein sicherer Weg ist, zuerst zu überprüfen, ob die Veranstaltung unterstützt wird, und wenn kein verwenden Ereignis "Größe ändern". Sie können dies erreichen, wie in diesem answer beschrieben:

Safer Fix:

// 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);