Html Buggy响应CSS网站 Iphone 7上的肖像模式

横向模式：

旋转回纵向模式：

---

问：为什么会发生这种情况？我能做些什么来修复这个错误？后台使用包装标签，而表单使用materialize

css

。 或者我应该这样做移动视图吗

JSIDLE链接（按要求）：

---

横向屏幕截图中的问题似乎是，它通过改变方向放大，然后您滚动了页面

包装器元素当前仅设置为body/html元素的高度。这是窗口的高度，而不是文档的高度。这就是为什么当你滚动超过窗口高度时背景会被剪裁

这个演示可能会让事情变得更清楚。

要解决这个问题，您可以尝试将背景放在主体上，并调整html和主体元素的高度，如下所示

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

<>我注意到你正在使用媒体查询，你可能想考虑在HTML

中添加这个元标签到头部。

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

这很难理解。您能提供任何链接或JS FIDLE吗？更新的JSFIDLE。现在工作真棒！然而，仍然有一个非常小的问题，我如何解决这个问题？它有点难看，就像这幅画一样，我仍然可以滚动到远处；丑陋的灰色渐变我的ipad也有问题：23英寸显示器上的主计算机也有同样的问题，如果添加我的主桌面视图，我已经修复了。我的桌面视图和ipad视图正常工作。然而，对于iphone的横向和纵向模式，它不起作用：见下图。我还将CSS改为高度：100%；保证金：0；