Buggy Responsive CSS Website

Question

1. Portrait-Modus auf Iphone 7

https://i.imgur.com/gVjwYM7.png

2. Querformat-Modus:

http://i.imgur.com/M1IwCM2.png

3. Rotierende zurück zum Portrait-Modus:

http://i.imgur.com/pbkBVZB.png

---

Q: Warum ist dies geschieht? Was kann ich tun, um diesen fehlerhaften Buggy CSS zu reparieren? Hintergrund verwendet das WRAPPER-Tag, während das Formular materialisiert css verwendet. Oder soll ich es einfach so für die mobile Ansicht machen? :

http://i.imgur.com/Y2RXUFi.png

JSFIDDLE LINK wunschgemäß: https://jsfiddle.net/9y0r0p2q/10/

Answer 1

Das Problem in der Landschaft Screenshot scheint zu sein, dass es durch die Orientierung zu ändern zoomt hat und dann haben Sie die Seite gescrollt.

Das Wrapper-Element ist derzeit nur auf die Höhe des body/html-Elements eingestellt. Welches ist die Höhe des Fensters, nicht das Dokument. Deshalb wird der Hintergrund abgeschnitten, sobald Sie weiter als die Höhe des Fensters scrollen.

Diese Demo könnte das Geschehen klarer machen.

Um dies zu beheben, können Sie stattdessen versuchen, den Hintergrund auf den Körper zu setzen und die Höhe von HTML und Körperelementen anzupassen, so.

html { 
    height: 100%; 
} 
body { 
    min-height:100%; 
    background-image: linear-gradient(to right, #054f7d, #00a7cf, #efe348, #861a54, #054f7d); 
    background-size: 600%; 
    background-position: 0 0; 
    box-shadow: inset 0 0 5em rgba(0, 0, 0, 0.5); 

    /* Animation */ 
    animation-duration: 20s; 
    animation-iteration-count: infinite; 
    animation-name: gradients; 
} 

https://jsfiddle.net/9y0r0p2q/11/

Ich habe auch bemerkt, dass Sie Medienanfragen verwenden, können Sie

<meta name="viewport" content="width=device-width, initial-scale=1"> 

in Ihrem HTML Hinzufügen dieser Meta-Tag auf den Kopf zu prüfen,