越野車響應CSS網站

Question

1. 肖像上iPhone 7

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

風景模式模式：

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

旋轉回肖像模式：

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

---

問：爲什麼發生這種情況？我能做些什麼來解決這個越野車響應CSS？背景是使用WRAPPER標籤，而表單是通過使用物化css。 或者我應該使它像這樣的移動視圖？ ：

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

的jsfiddle LINK的要求： https://jsfiddle.net/9y0r0p2q/10/

Answer 1

在風景截圖的問題似乎是，它已經改變方向放大，然後用戶滾動頁面。

包裝元素當前僅設置爲body/html元素的高度。這是窗口的高度，而不是文檔。這就是爲什麼一旦您滾動窗口的高度以外的任何地方時背景被剪裁。

此演示可能會使發生更清晰的事情發生。 https://jsfiddle.net/20n6ag61/

要解決這個問題，您可以嘗試將背景放在身體上，並調整html和body元素的高度，就像這樣。

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/

我也注意到你正在使用媒體查詢，你可能要考慮在你的HTML

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