Website verwandelt sich in eine Landschaft mit Tastatur

Question

Ich bin in ein interessantes Problem geraten. Auf meiner Website habe ich zwei Versionen der Navigationsleiste für Handys - Querformat und Hochformat. Um diese beiden zu erkennen, verwende ich die CSS-Medienausrichtung.

Wenn ich jedoch meine Tastatur öffne, wird die Seite zur Landschaft, weil die tatsächliche Seitengröße kleiner wird.
Kann mir jemand helfen, das zu beheben? Alles, woran ich denken kann, ist Fokus Ereignis auf Eingaben, so dass, wenn sie konzentriert sind, das Porträt Manu eingeschaltet ist, aber es würde das Menü auch auf Landschaft ändern. Hier ist ein illustratives Bild

Vielen Dank!

Answer 1

Wenn Sie überprüfen Media Queries W3C Recommendation

Sie diesen interessanten Satz finden:

Die ‚Orientierung‘ Medien-Funktion ist ‚Porträt‘, wenn der Wert der ‚height‘ Medien-Funktion größer oder entspricht dem Wert der 'Breite' Medienfunktion. Ansonsten ist "Orientierung" "Landschaft".

So, wenn die Tastatur geöffnet wird, wird Ihre Seite in Querformatmodus.

Es gibt mehrere Möglichkeiten, dieses Problem zu überwinden, können Sie überprüfen this beantworten.

Answer 2

Sie sollten die Höhe/Ausrichtung vollständig ignorieren. Etwas wie dieses:

@media (max-width: 480px) 
{ 
    /* inline menu */ 
} 

@media (min-width: 481px) 
{ 
    /* multiple rows menu */ 
}