怎样才能让我的页面在没有滚动的情况下显示缩放？
怎样才能让我的页面在没有滚动的情况下显示缩放？
提问于 2018-11-04 05:03:37
因此，我的一个朋友遇到了一个问题，网站在1440 to乘1024 to的屏幕上正确显示，但是在较小的屏幕上，您必须滚动才能看到更低的屏幕。我们都一直在寻找，但都找不出答案，这可能是因为它主要是由pngs制成的，它不能正常工作，也可能是因为我们都是白痴，而且实际上非常简单，不管是哪种情况我们都找不到，所以希望有人能做到。溢出-y:隐藏不会解决问题，因为这只会阻止滚动，页面的内容保持原样。我们还尝试让JS检测窗口大小，而且它似乎也不起作用。
它在1366 at上被768 at屏幕https://imgur.com/LN6YJUJ 100%放大。
这就是他想让它看起来像没有滚动(这是在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>
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-11-11 08:07:42
所以，我100%肯定它在我的屏幕上有一个卷轴，因为这个问题是如何解决的，结果是接收网站的人没有把他们的缩放设置为100%，所以他们看起来很奇怪……叹息..。有些人..。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53137915
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号