越野车响应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">