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

问题描述：

我想实现一个响应式网页。我主要使用百分比“％”进行大小调整。如果您在高分辨率下调整页面大小以手动降低，它工作正常。HTML页面大小正确调整窗口大小，但不加载

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

这是我没有分离CSS和脚本从指数又那么所有的代码是在一个页面。链接http://slavesofdestiny.com/kaanproje/

（它通常是我带的域名）有什么建议？

编辑：我也忘了提及我使用的是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'); 
    }

请在您的问题示例代码响应页面

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

另外：您应该添加在你的<script>标记此行。链接可能会中断，网站可能会更改。这还允许用户从现在开始搜索相同的答案，以便能够查看您的代码，并且还可以帮助我们确定问题所在的位置。 – SnareChops 2014-10-04 08:29:00

你是对的我会尽快编辑它，只要我有一个很好的互联网连接！感谢提醒！ – Kaan 2014-10-04 08:50:33

答

在这种情况下，你的问题是Jquery的整页显示插件。

问题是该脚本没有对onload进行更改，并且不适合您的设计。如果你想这样做适应视大小而定，你真的应该看看CSS media queries

它解决了它。并感谢来源！ – Kaan 2014-10-04 08:53:01

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

相关推荐