Javascript HTML页面大小在调整窗口大小时正确调整，但在加载时不调整
我正在尝试实现一个响应性网页。我主要使用百分比%来确定尺寸。如果您在高分辨率上调整页面大小以手动降低分辨率，则工作正常 但若你们以低分辨率加载页面，那个么若你们再次手动调整页面大小，它会以某种方式无法适应 这里是链接 我并没有将css和脚本从索引中分离出来，所以所有的代码都在一个页面中。这通常是我乐队的领域。有什么建议吗 编辑：我还忘了提到我正在使用fullPage.js插件 谢谢 代码：Javascript HTML页面大小在调整窗口大小时正确调整，但在加载时不调整,javascript,html,css,fullpage.js,Javascript,Html,Css,Fullpage.js,我正在尝试实现一个响应性网页。我主要使用百分比%来确定尺寸。如果您在高分辨率上调整页面大小以手动降低分辨率，则工作正常 但若你们以低分辨率加载页面，那个么若你们再次手动调整页面大小，它会以某种方式无法适应 这里是链接 我并没有将css和脚本从索引中分离出来，所以所有的代码都在一个页面中。这通常是我乐队的领域。有什么建议吗 编辑：我还忘了提到我正在使用fullPage.js插件 谢谢 代码： 在这种情况下，您的问题在于Jquery FullPage插件 问题是脚本在加载时没有进行更改，并且与您的设
在这种情况下，您的问题在于Jquery FullPage插件 问题是脚本在加载时没有进行更改，并且与您的设计不兼容。 您应该在标记上添加此行：
此外，如果您想制作一个根据大小进行调整的响应页面，您应该仔细阅读，请在问题中包含示例代码。链接可以断开，站点可以更改。这也允许用户在几年后从同一答案中搜索，以查看您的代码，并帮助我们确定您的问题区域。您是对的，我将在获得良好的internet连接后立即编辑它！谢谢提醒！
<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
});
}
}
});
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() });