CSS 视口问题：vh 与 100%

Question

我使用 HTML 和 CSS 编写响应式网站。我使用 Bootstrapper 框架。

我的问题：当我使用 100% 作为背景图像时，图像不会到达桌面屏幕上的页面末尾（因为以 100% 高度缩放的图像小于显示器结果）。在 iPhone (Safari) 上看起来不错。页脚将位于图像下方。

当我使用 Viewport-value 100vh 时，桌面屏幕上的结果看起来不错（图像将填充背景），但在移动设备 (iPhone) 上，文本将与页脚重叠。看起来很可怕。

我正在寻找一种解决方案，例如：在台式机上使用 100vh，在移动设备上使用 100%。这可能吗？

HTML 代码：

        <section id="myid">
              <div class="myclass">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 opaline">
                            <div class="row">
                                <div class="col-md-10 col-md-offset-1">
								<p>Great Content</p>
								</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <footer>
           <div class="container">
                <div class="row">
                    <div class="col-md-10">
					
                        <p>Great Footer Content</p>
                    </div>
                </div>
            </div>
        </footer>

CSS：（移动浏览器上的OK-Result）

.myclass {
    /* The image used */
    background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    padding-top: 36px;
}

CSS：（桌面浏览器上的 OK-Result）

.myclass {
    /* The image used */
    background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    padding-top: 36px;
}

我也玩过 calc 函数 - 没有成功：

height: calc(100vh - 000px);

000 = 页脚高度

Answer 1

我正在寻找一种解决方案，例如：在台式机上使用 100vh，在移动设备上使用 100%。这可能吗？

如果这就是你要找的，你可以使用 - @media CSS at-rule -

@media CSS at-rule 可用于根据一个或多个媒体查询的结果应用样式，在您的情况下为屏幕大小。

阅读更多mdn doc

w3schools exemples are nice

编辑：发现了一些可能相关的东西css-tricks

我在你提供的代码上应用了 css-trick 上的内容

@media only screen
and (min-device-width: 1000px)
and (max-device-width: 1600px)
and (-webkit-min-device-pixel-ratio: 1) {

    .myclass {
        /* The image used */
        background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) );
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100vh;
        padding-top: 36px;
    }
}

@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
    .myclass {
        /* The image used */
        background: linear-gradient(rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1));
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 100%;
        padding-top: 36px;
    }

}

<section id="myid">
    <div class="myclass">
        <div class="container">
            <div class="row">
                <div class="col-md-8 opaline">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <p>Great Content</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</section>

<footer>
    <div class="container">
        <div class="row">
            <div class="col-md-10">

                <p>Great Footer Content</p>
            </div>
        </div>
    </div>
</footer>

---

---

编辑 -2- : 从您重播的答案中：

桌面屏幕（1920x1200px 结果）

在您发布的代码中，您使用了

 @media only screen 
 and (min-device-width: 1000px) 
 and (max-device-width: 1600px)`

尝试将“最大设备宽度”查询值更改为想要的结果 - 1920 像素（及以上）

---

编辑-3-：

正如您刚刚在解决方案中回答的那样，因为桌面视图是默认视图，所以从桌面媒体查询中完全删除分辨率像素范围可能会奏效

Answer 2

您是说这仅适用于 iPhone 还是适用于所有手机？

因为如果这适用于所有手机视图，您可以使用@media 来做到这一点。

也许这些链接可以帮助你：

Using media queries

Media Queries for Standard Devices

Using the viewport meta tag to control layout on mobile browsers

Responsive Web Design - Media Queries

Answer 3

感谢@media 的提示

所以我建立了这个“开关”。它在 iPhone 6S 上运行良好，但在桌面屏幕（1920x1200px 结果）上根本不会出现该样式。我的错在哪里？

/* Mobile Device */
    @media only screen 
        and (min-device-width: 375px) 
        and (max-device-width: 667px) 
        and (-webkit-min-device-pixel-ratio: 2)
        and (orientation: portrait) { 
    
            .myclass {
                /* The image used */
                background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                height: 100%;
                padding-top: 36px;
            }
        }

/* Desktop Screen */
    @media only screen 
        and (min-device-width: 1000px) 
        and (max-device-width: 1600px) 
        and (-webkit-min-device-pixel-ratio: 1) { 
    
          .myclass {
                /* The image used */
                background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                height: 100vh;
                padding-top: 36px;
            }
        }

Answer 4

这样解决：

/* Mobile Devices */
    @media only screen 
        and (min-device-width: 375px) 
        and (max-device-width: 667px) 
        and (-webkit-min-device-pixel-ratio: 2)
        { 
 	            .myclass {
                /* The image used */
                background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                height: 100%;
                padding-top: 36px;
            }
        }  

/* Desktop Screen */
/* Mobile Devices */
    @media only screen 
        { 
 	            .myclass {
                /* The image used */
                background: linear-gradient( rgba(33, 37, 43, 0.6), rgba(33, 37, 43, 0.1) ), url(/images/image.jpg);
                background-position: center;
                background-repeat: no-repeat;
                background-size: cover;
                height: 100vh;
                padding-top: 36px;
            }
        }