所以我的一个 friend 遇到了一个问题，网站在 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>最佳答案
所以，我 100% 确定它在我的屏幕上有一个滚动条，因为它的大小很奇怪 问题是如何解决的，结果是接收该网站的人没有将他们的缩放设置为 100 % 所以他们看起来很奇怪......叹气......有些人....
关于javascript - 如何让我的页面在不滚动的情况下按比例显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53137915/