HTML页面大小在窗口调整大小时正确调整，但不会加载

时间：2014-10-04 08:07:16

标签： javascript html css fullpage.js

我正在尝试实施响应式网页。我大多使用百分比“％”进行尺寸调整。如果您在高分辨率上调整页面以手动降低，它工作正常。

但是如果你以低分辨率加载页面，它就会以某种方式无法适应（如果再次手动调整大小，则工作正常）。

以下是链接http://slavesofdestiny.com/kaanproje/

我没有从索引中分离css和脚本，所以所有的代码都在一个页面中。（通常是我的乐队的域名）有什么建议吗？

编辑：我也忘了提到我使用的是fullPage.js插件。

谢谢！

代码：

<body>
<div id="menu">
    <div id="menu-container">
        <ul id="menu-left">
                <li data-menuanchor="section1"><a class="left-menu-link" href="#HiddenTrack">HIDDEN TRACK</a></li>
                <li data-menuanchor="section2"><a class="left-menu-link" href="#Hizmetlerimiz">HİZMETLERİMİZ</a></li>
                <li data-menuanchor="section3"><a class="left-menu-link" href="#Musterilerimiz">MÜŞTERİLERİMİZ</a></li>
                <li data-menuanchor="section4"><a class="left-menu-link" href="#Portfolyo">PORTFOLYO</a></li>
                <li data-menuanchor="section5"><a class="left-menu-link" href="#Iletisim">İLETİŞİM</a></li>
            </ul>
        <ul id="menu-right">
            <li><a class="right-menu-link" href="https://www.facebook.com/hiddentracktr" target="_blank">FACEBOOK</a></li>
            <li><a class="right-menu-link" href="https://twitter.com/HiddenTrackTR" target="_blank">TWITTER</a></li>
            <li><a class="right-menu-link" href="https://www.linkedin.com/company/hidden-track-creative" target="_blank">LINKEDIN</a></li>
            <li><a class="right-menu-link" href="http://www.youtube.com/channel/UChJGAyoLFqr2qgLSY4b4BSw" target="_blank">YOUTUBE</a></li>
            <li><a class="right-menu-link" href="http://hiddentrackcreative.tumblr.com" target="_blank">TUMBLR</a></li>
            <li><a class="right-menu-link" href="https://www.behance.net/hiddentrackcreative" target="_blank">BEHANCE</a></li>
        </ul>
        <a href="http://www.hiddentrack.com"><img id="hiddentrack-vector" style="position: absolute; top: 0; left: 45%; width: 10em;" src="Vector-Smart-Object.png" alt="Hidden Track"></a>
        <img style="float: right; margin-top: 2%; width: 250px;" id="mobile-ht-logo" src="hiddentrackfooter.png" alt="Hidden Track Logo">
        <div id="mobile-menu"  class="dl-menuwrapper">
            <button id="menu-button" class="dl-trigger">Open Menu</button>
            <ul class="dl-menu" id="mobile-menu-ul">
                    <li data-menuanchor="section1"><a class="left-menu-link" href="#HiddenTrack">HIDDEN TRACK</a></li>
                    <li data-menuanchor="section2"><a class="left-menu-link" href="#Hizmetlerimiz">HİZMETLERİMİZ</a></li>
                    <li data-menuanchor="section3"><a class="left-menu-link" href="#Musterilerimiz">MÜŞTERİLERİMİZ</a></li>
                    <li data-menuanchor="section4"><a class="left-menu-link" href="#Portfolyo">PORTFOLYO</a></li>
                    <li data-menuanchor="section5"><a class="left-menu-link" href="#Iletisim">İLETİŞİM</a></li>
            </ul>
        </div>
    </div>    
</div>
<div id="fullpage">
<div id="section1" class="section">
    <div id="HT-hello">
        <div id="HT-Hello-Main-Image">
            <h1 style="font-family: Oswald-Bold; font-size: 1066%; color: #72c4d6; margin-top: 6.5%;">SOCIAL & DESIGN</h1>
            <hr style="width: 150px; color: #72c4d6; margin-top: -100px;">
            <h3 style="font-family: PT_Sans-Italic; font-size: 186%; color: #72c4d6">
                ''Para kazanmak sanattır, çalışmak sanattır ama iyi iş yapmak en iyi sanattır.'' <br>(Andy Warhol)
            </h3>
        </div>
        <div class="down-button"><a href="#Hizmetlerimiz"><img src="downIcon.png" alt="Down Icon"></a></div>
    </div>
</div>
<div id="section2" class="section">
    <div id="HT-ht">
        <img style="width: 60%;" src="vso.png" alt="Hidden Track">
        <hr style="width: 150px; color: #72c4d6; margin-top: 50px;">
        <h3 style="font-family: PT_Sans-Italic; font-size: 220%; color: #72c4d6">2012 yılında kurulmuş multidispliner, kreatif bir oluşumdur. <br>Hizmet verdiği markaların iletişim problemlerini çözmeyi amaçlar. Markanızın <br>gereksinim duyduğu konularda stratejik çözümler sunar.</h3>
        <img style="width: 40%;" src="SOCIAL-&-DESIGN.png" alt="Social and Design">
    </div>
    <div class="down-button"><a href="#Musterilerimiz"><img src="downIcon.png" alt="Down Icon"></a></div>
</div>
<div id="section3" class="section">
    <div style="" class="slide" data-anchor="slide1">
        <div style="text-align: left; width: 60%; margin-left: auto; margin-right: auto;">
        <h1 style=" float: left; color: #72c4d6; font-family: PT_Sans-Bold; font-size: 650%;">MARKALAŞMA,</h1>
        <img style="float: right; width: 20%; margin-top: 3%;" src="fingerprint.png" alt="Finger Print">
        <h3 style="float: left; color: #72c4d6; font-family: PT_Sans-Italic; font-size: 155%; margin-top: -7.5%;">süreciniz için altyapı oluşturuyor, kararlılıkla devam politikası öneriyoruz. </h3>
        <h3 style="float: left; color: #72c4d6; font-family: PT_Sans; font-size: 135%; margin-top: -4%;">Unutmayın ki, bir marka müşterileri nezdinde kararlı algılanan değere<br> sahip olduğu sürece pazar performansı da buna paralel olarak artacaktır.</h3>
        </div>
    </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
    <div class="slide" data-anchor="slide5"> Slide 5 </div>
</div>
<div id="section4" class="section">
    <h1>Section 4</h1>
</div>
<div id="section5" class="section">
    <h1>Section 5</h1>
</div>
</div>
<script src="ResponsiveMultiLevelMenu/js/jquery.dlmenu.js" type="text/javascript"></script>
<script>
    $(function() {
$('#mobile-menu').dlmenu({
        animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' }
});
});
</script>
</body>

脚本：

$(document).ready(function() {
    $('#fullpage').fullpage({
        sectionsColor: ['#ffffff', '#ffffff', '#ffffff', '#ffffff', 'ffffff'],
        anchors: ['HiddenTrack', 'Hizmetlerimiz', 'Musterilerimiz', 'Portfolyo', 'Iletisim'],
        menu: 'menu-left',
        css: true,
        loopBottom: true
    });
});
$(document).ready(function(){ $.fn.fullpage.reBuild(); });
$(document).ready(function (){
if(jQuery.browser.mobile){
    $('#mobile-menu').show();
    $('#mobile-ht-logo').show();
    $('#menu-button').show();
    $('#mobile-menu-ul').show();
    $('#menu-right').hide();
    $('#menu-left').hide();
    $('#hiddentrack-vector').hide();



    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    /*if(windowWidth <= windowHeight){
        $('#HT-Hello-Main-Image').css("background-image","none");
    }else{
        $('#HT-Hello-Main-Image').css("background-image","url('hello.png')");
        $('#HT-Hello-Main-Image').css("width", "100%");
    }*/
}
});

    $(document).ready(function (){
    var windowWidth = $(window).width();

    if(!jQuery.browser.mobile){
        $('#mobile-ht-logo').hide();
        $('#menu-button').hide();
        $('#mobile-menu').hide();
        if(windowWidth <= $(window).height()){
            $('#fullpage').fullpage({
            autoScrolling:false
        });
        }
}
});

CSS：

   li{
        display: inline;
        list-style-type: none;
    }
    #menu{
        position:fixed;
        margin-top: auto;
        height: 9%;
        width: 100%;
        background: #72c4d6;
        z-index:9;
        color: #ffffff;
        display: block;
        display: inline;
    }
    #menu-container{
        //margin-left: 100px;
        //margin-right: 100px;
        width: 95%;
        margin-left: auto;
        margin-right: auto;
    }
    #menu-left{
        float: left;
        margin-top: 1.5%;
        top: 0px;
        width: 44%;
        position: relative;
        text-align: center;
    }
    #menu-right{
        float: right;
        margin-top: 1.5%;
        top: 0px;
        width: 44%;
        position: relative;
        text-align: center;
    }
    .section{
        text-align: center;
    }
    .left-menu-link{
        font-family: PT_Sans;
        color: #ffffff;
        font-size: 105%;
        text-decoration: none;
        margin-right: 2.2%;
    }
    .right-menu-link{
        font-family: PT_Sans;
        color: #ffffff;
        font-size: 105%;
        text-decoration: none;
        margin-right: 4%;
    }
    // Menu Finish
    #HT-hello{
        top: 0px;
        margin: auto;
        text-align: center;
    }
    #HT-ht{

    }
    #HT-Hello-Main-Image{
        background: url("hello.png") center;
        position: absolute;
        background-repeat: no-repeat;
        top: 50px;
        right: 0;
        left: 0;
        bottom: 70px;
    }
    .down-button{
        position: absolute; 
        bottom: 50px; 
        left: 0; 
        right: 0; 
        margin: auto; 
        width: 50px;
    }
    @font-face{
        font-family: "PT_Sans";
        src: url('libs/PT_Sans/PT_Sans-Web-Regular.ttf');
    }
    @font-face{
        font-family: "PT_Sans-Bold";
        src: url('libs/PT_Sans/PT_Sans-Web-Bold.ttf');
    }
    @font-face{
        font-family: "PT_Sans-Italic";
        src: url('libs/PT_Sans/PT_Sans-Web-Italic.ttf');
    }
    @font-face{
        font-family: "PT_Sans-BoldItalic";
        src: url('libs/PT_Sans/PT_Sans-Web-BoldItalic.ttf');
    }
    @font-face{
        font-family: "Oswald-Regular";
        src: url('libs/Oswald/Oswald-Regular.ttf');
    }
    @font-face{
        font-family: "Oswald-Bold";
        src: url('libs/Oswald/Oswald-Bold.ttf');
    }
    @font-face{
        font-family: "Oswald-Light";
        src: url('libs/Oswald/Oswald-Light.ttf');
    }

1 个答案:

答案 0 :(得分：3)

在这种情况下，你的问题是使用Jquery FullPage插件。

问题是脚本没有对onload进行更改，并且与您的设计不兼容。 您应该在<script>标记上添加此行：

$(document).ready(function(){ $.fn.fullpage.reBuild() });

另外，如果你想做一个根据尺寸进行调整的响应式页面，你应该真正看看CSS media queries

相关问题
最新问题