因此,我的一个好友遇到了一个问题,该网站在1440px x 1024px的屏幕上可以正常显示,但是在较小的屏幕上,您需要滚动才能进一步查看。我们一直在搜索并且无法弄清楚,现在可能是这样的事实,即它主要是由png构成的,缩放无法正常工作,或者它可能是我们都是白痴,而且实际上非常简单,无论哪种情况我们都无法解决,希望有人可以。 Overflow-y:hidden将无法解决问题,因为这只会阻止滚动并且页面内容保持原样。我们还尝试使用JS来检测窗口大小,但它似乎也不起作用。
此处在1366px x 768px屏幕上以100%缩放 https://imgur.com/LN6YJUJ
这是他希望其在没有滚动的情况下的外观(这是同一屏幕的65%缩放) https://imgur.com/97vjDs0
这是CSS和HTML(由于缺少文件而无法运行,但我认为问题可能出在其中)
html{
height: 100%;
}
body{
background: url("../img/background.png") no-repeat center center fixed;
background-size: cover;
}
.margin-15{
margin-top: 7%;
}
.container-fluid{
height: 100vh;
min-height: 100%;
min-width: 100%;
}
.Rectangle{
width: 168px;
height: 44px;
margin-top: 3%;
border-radius: 18px;
background-color: #292929;
left: 43%;
top: 28.3%;
}
.Rectangle p{
text-align: center;
padding-right: 10%;
padding-top: 6%;
width: 185.2px;
height: 34.3px;
font-family: Roboto;
font-size: 18px;
font-weight: bold;
font-style: normal;
font-stretch: normal;
line-height: normal;
letter-spacing: normal;
color: #ffffff;
}
.Rectangle p span{
color: #a3e8f5;
}
.navBar1 img{
max-width: 40%;
padding-top: 2%;
object-fit: contain;
}
/**.col-xs-3 .atomix{
padding-top: 4%;
}
.col-xs-3 .Rectangle{
margin-top: 20%;
}
.col-xs-3 .navBar1{
margin-top: 10%;
padding-bottom: 20%;
}
.col-xs-3 .atomix{
margin-top: 2%;
}
.col-xs-3 .forums{
margin-top: -5%;
}
.col-xs-3 .discord{
margin-top: 4%;
} **/
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home | Lectric</title>
<link rel="stylesheet" href="css\bootstrap.min.css">
<link rel="stylesheet" href="css\master.css">
<script src="https://cdn.jsdelivr.net/gh/leonardosnt/mc-player-counter@1.1.1/dist/mc-player-counter.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid mt-5">
<div class="row">
<div class="col-lg-12 col-md-12 col-xs-3 margin-3">
<div class="atomix">
<img src="img\atomix.png" alt="Atomix" class="img-responsive mx-auto d-block"/>
</div>
<div class="col-lg-12 col-md-12 col-xs-3">
<div class="Rectangle playersOnline mx-auto d-block">
<p><span data-playercounter-ip="atomixprison.net">0</span> online</p>
</div>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-xs-3">
<div class="navBar1">
<img src="img/NavBar1.png" class="img-responsive mx-auto d-block" alt="navbar"/>
</div>
</div>
<div class="row margin-4 margin-15">
<div class="col-lg-5 col-md-5 mb-0">
<div class="webStore">
<a href="https://atomixnetwork.buycraft.net/"><img src="img/webstore.png" alt="webstore" class="mx-auto d-block img-responsive"></a>
</div>
</div>
<div class="col-lg-2 mt-xl-5 col-md-5 mb-md-0">
<div class="forums">
<a href="https://www.atomixprisonmc.net/"><img src="img/forums.png" alt="forums" class="mx-auto d-block img-responsive"></a>
</div>
</div>
<div class="col-lg-5 col-md-5 mb-0">
<div class="discord">
<a href="https://discord.gg/D63c9JM"><img src="img/discord.png" alt="discord" class="mx-auto d-block img-responsive"></a>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js\bootstrap.min.js"></script>
<script type="text/javascript">
$('#body').css('min-height', '100%');
</script>
</body>
</html>
答案 0 :(得分:0)
所以,我有100%的把握是因为解决问题的大小不一,所以我的屏幕上有滚动条,事实证明,接收该网站的人未将其缩放比例设置为100 %,所以看起来对他们来说很奇怪。...叹气 ...有些人。...