Question

我做了一个简单的第一页，但我想在用户滚动后立即在第二页上开始内容

当前的实施在crossbrowser / cross设备环境（平板电脑，手机，台式机......）中并不是最优的。有没有简单的方法来调整或实施它？

我创建了the simple example here，它作为第一个实验并不坏，但它也不好。

如您所见，黑色部分是第二页的开头..因此不应该是可见的..

<h3>This is the html code</h3>  
<div class="container body-content">
<div class="row page" id="first-page">
    <div class="col-md-12 text-center">
        <h1>MemberPop</h1><hr>
        <h3>Superkrachten om uw leden en betalingen te beheren.</h3><hr>
        <img id="popeyeIMG" src="http://membershipmanagement.azurewebsites.net/Images/Backgrounds/Popeye.jpg"><br>                                       <br>
        <a class="btn btn-primary" href="/Account/Register">Probeer het gratis</a> <br>
        of <a class="" href="/Account/Login">Log in</a>
    </div>
</div>
<div class="row">
    <div class="col-md-12">

    </div>
</div>

这是调整图像大小的简单脚本：

 var clientHeight = $(window).height();
 var firstPage = $("#first-page").height();
 if (clientHeight < firstPage) {
     var Relation = (firstPage / clientHeight) * 1.3 ;
     $("#popeyeIMG").height($("#popeyeIMG").height() / Relation);
 }

在任何情况下（移动设备，平板电脑，桌面设备）都有关于我应该改进的建议，以便将页面的第一部分扩展到整页？

Answer 1

您可以在js文件的末尾$("#first-page").height(clientHeight);

我还会添加一些媒体查询以适合您的h1和h3（以及可能的#popeyeIMG，而不是使用关系定义它）

像这样的东西

@media screen and (max-height: 600px) {
    h1 {
        font-size: 0.8em;
    }
    h3 {
        font-size: 0.8em;
    }
}

通过调整img拉伸到第一整页

1 个答案: