javascript - 如何检测浏览器视口(viewport)以在首屏显示所需内容？

Question

我的问题是我希望我的网站的特定内容显示在不同视口(viewport)或屏幕分辨率的首屏上方。这是通过检测浏览器视口(viewport)宽度和高度的 Javascript/jQuery(是否有自动执行此操作的脚本？)完成的，还是通过媒体查询完成的？

我有一个这样做的网站示例:

http://www.themeskingdom.com/

无论用户使用何种屏幕尺寸或视口(viewport)，他们想要的内容始终会出现在首屏。我想完成同样的事情。任何帮助将不胜感激。

Answer 1

这是一个纯CSS解决方案。

通过使用:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

允许您将 height: 100%; 分配给元素，因为它们可以基于父元素。

强烈建议，确保查看 css calc() 和 box-sizing 以在使用百分比时让生活更轻松.

box-sizing 允许 padding、margin、border 都在标签内部而不是标签外部计算。

CSS calc() 像这样，height: calc(100% - 70px);，也是一个很好用的工具，但没有最好的移动支持. (只有在将百分比与像素大小混合时才应使用 calc)

这是 html:

<div class="mainCont">
    <div class="mainHeader">

    </div>
    <div class="control">

    </div>
</div>

这是CSS:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.mainCont {
    position: relative;
    width: 100%;
    height: 100%;
}

.mainHeader {
    width: 100%;
    height: 75%;
    background-image: url("http://www2.ca.uky.edu/forestry/maehrbearky/Forest%20trail.jpg");
    background-size: cover;
    background-position: center center;
}

.control {
    position: relative;
    height: 25%;
    width: 100%;
    background: tan;
}

最后，一个 fiddle :Demo