Question

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

我有一个网站的例子：

http://www.themeskingdom.com/

无论用户具有何种屏幕尺寸或视口，其所需内容始终显示在首屏上方。我想完成同样的事情。任何帮助将不胜感激。

Answer 1

这是一个纯粹的CSS解决方案。

使用：

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

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

强烈建议，请务必查看css calc()和box-sizing，以便在使用百分比时让生活更轻松。

box-sizing允许填充，边距，边框都在标签内部而不是在标签之外。

像这样的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;
}

最后，小提琴：Demo

Answer 2

只需使用具有背景颜色的div：透明，并使用“border-bottom：1px solid grey”并将内容放入其中。

Answer 3

我会采用media-queries方式，首先关注width。但是，如果您必须考虑height，则可以使用media-queries或JavaScript来检测身高，但在某些情况下JavaScript可能更为可取（考虑到浏览器支持，例如IE7和IE8）。

@media (min-height: 640px) { ... }
@media (max-height: 640px) { ... }

我创建了这个小片段来有条件地加载JS，但它可能在其他应用程序中很有用：

// calculate viewport width so that we can load js conditionally
function responsive(){
    var scaffolding = 'desktop';
    var w = parseInt($(window).innerWidth(), 10);
    if (w > 0 && w < 768) { scaffolding = 'phone'; }
    if (w >= 768 && w <= 980) { scaffolding = 'tablet'; }
    if (w > 980) { scaffolding = 'desktop'; }
    return scaffolding;
}

if ( responsive() == phone) {
    // do stuff only on phones
}
if ( responsive() != phone) {
    // do stuff everywhere else but phones
}

无论分辨率如何，将内容保留在屏幕上的一个重要概念是人们可以通过定位（可能涉及定位的父母）或通过删除在小视口上没有优先级的元素来实现 - 让重要元素保持不变。这可以通过简单的媒体查询来完成，这些查询根据分辨率显示或隐藏某些元素。

如何检测浏览器视口以在首屏上显示所需内容？

3 个答案: